快捷導(dǎo)航

JS如何設(shè)置iOS中微信瀏覽器的title

更新時間：2016年11月22日 10:23:33 作者：big董

本文給大家分享js設(shè)置ios中微信瀏覽器中的title的解決方法，實現(xiàn)原理比較簡單，對js微信瀏覽器title相關(guān)知識感興趣的朋友一起通過本文學(xué)習(xí)吧

說到web前端，瀏覽器差異是不可回避的問題，這次在項目就遇到下面的問題：

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

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

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

解決方法：

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);

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

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

您可能感興趣的文章: