說(shuō)到web前端，瀏覽器差異是不可回避的問(wèn)題，這次在項(xiàng)目就遇到下面的問(wèn)題：

微信導(dǎo)航欄的內(nèi)容是直接拿的項(xiàng)目中title來(lái)設(shè)置的。但是現(xiàn)在做的項(xiàng)目是一個(gè)單頁(yè)應(yīng)用，整個(gè)頁(yè)面只會(huì)在第一次完全刷新，后面只會(huì)局部刷新，所以只能在頁(yè)面刷新的時(shí)候通過(guò)js動(dòng)態(tài)修改title。開(kāi)始我們使用的做法如下：

document.title = "微信導(dǎo)航欄想要顯示的內(nèi)容";$("title").text("微信導(dǎo)航欄想要顯示的內(nèi)容");document.getElementsByTagName("title")[0].innerText = "微信導(dǎo)航欄想要顯示的內(nèi)容"

上面的的方法簡(jiǎn)單方便，可惜上面的方法在安卓上面設(shè)置沒(méi)有問(wèn)題，但是iOS微信瀏覽器是無(wú)效。

解決方法：

var $body = $('body');document.title = 'the title you want to set';var $iframe = $("<iframe style='display:none;' src='/favicon.ico'></iframe>");$iframe.on('load',function() {setTimeout(function() {$iframe.off('load').remove();}, 0);}).appendTo($body);

原理比較簡(jiǎn)單，之前是因?yàn)槲⑿艦g覽器首次加載頁(yè)面初始化title后，就再也不監(jiān)聽(tīng) document.title的change事件。而這里修改title之后，給頁(yè)面加上一個(gè)內(nèi)容為空的iframe，隨后立即刪除這個(gè)iframe，這時(shí)候會(huì)刷新title。但是，在iframe加載和刪除的時(shí)候，iOS頁(yè)面會(huì)有幾毫秒的閃動(dòng)（有灰色的框），Android直接有灰色的框出現(xiàn)在頁(yè)面不消失，所以，一開(kāi)始加載iframe的時(shí)候，就將該iframe的樣式設(shè)置為：display: none;這樣就解決了這個(gè)問(wèn)題，同時(shí)因?yàn)閐isplay：none這個(gè)設(shè)置，iframe是脫離文本流的，那么加載和刪除這個(gè)iframe都不會(huì)改變文本流，也不會(huì)觸發(fā)頁(yè)面渲染。

以上所述是小編給大家介紹的JS如何設(shè)置iOS中微信瀏覽器的title，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！