js設定ios中微信瀏覽器的title
說到web前端,瀏覽器差異是不可迴避的問題,這次在專案就遇到下面的問題:
微信導航欄的內容是直接拿的專案中title來設定的。但是現在做的專案是一個單頁應用,整個頁面只會在第一次完全重新整理,後面只會區域性重新整理,所以只能在頁面重新整理的時候通過js動態修改title。開始我們使用的做法如下:
document.title ="微信導航欄想要顯示的內容";
$("title").text("微信導航欄想要顯示的內容");
document.getElementsByTagName("title")[0].innerText
= "微信導航欄想要顯示的內容"
上面的的方法簡單方便,可惜上面的方法在
解決方法:
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後,就再也不監聽 document.title的change事件。而這裡修改title之後,給頁面加上一個內容為空的iframe,隨後立即刪除這個iframe,這時候會重新整理title。但是,在iframe載入和刪除的時候,iOS頁面會有幾毫秒的閃動(有灰色的框),Android直接有灰色的框出現在頁面不消失,所以,一開始載入iframe的時候,就將該iframe的樣式設定為:display: none;這樣就解決了這個問題,同時因為display:none這個設定,iframe是脫離文字流的,那麼載入和刪除這個iframe都不會改變文字流,也不會觸發頁面渲染
該方法不是原創,只是把網上的內容進行了一次整合。