DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS如何設置iOS中微信浏覽器的title
JS如何設置iOS中微信浏覽器的title
編輯:關於JavaScript     

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

微信導航欄的內容是直接拿的項目中title來設置的。但是現在做的項目是一個單頁應用,整個頁面只會在第一次完全刷新,後面只會局部刷新,所以只能在頁面刷新的時候通過js動態修改title。開始我們使用的做法如下:

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

上面的的方法簡單方便,可惜上面的方法在安卓上面設置沒有問題,但是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後,就再也不監聽 document.title的change事件。而這裡修改title之後,給頁面加上一個內容為空的iframe,隨後立即刪除這個iframe,這時候會刷新title。但是,在iframe加載和刪除的時候,iOS頁面會有幾毫秒的閃動(有灰色的框),Android直接有灰色的框出現在頁面不消失,所以,一開始加載iframe的時候,就將該iframe的樣式設置為:display: none;這樣就解決了這個問題,同時因為display:none這個設置,iframe是脫離文本流的,那麼加載和刪除這個iframe都不會改變文本流,也不會觸發頁面渲染。

以上所述是小編給大家介紹的JS如何設置iOS中微信浏覽器的title,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved