首頁 > web前端 > js教程 > JS如何設定iOS中微信瀏覽器的title

JS如何設定iOS中微信瀏覽器的title

高洛峰
發布: 2016-12-05 17:19:37
原創
1047 人瀏覽過

說到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=&#39;display:none;&#39; src=&#39;/favicon.ico&#39;></iframe>");
$iframe.on(&#39;load&#39;,function() {
setTimeout(function() {
$iframe.off(&#39;load&#39;).remove();
}, 0);
}).appendTo($body);
登入後複製

   

原理比較簡單,之前是因為微信瀏覽器首次載入頁面初始化title後,就再也不監聽 document.titlechange的事件。而這裡修改title之後,給頁面加上一個內容為空的iframe,隨後立即刪除這個iframe,這時候會刷新title。但是,在iframe載入和刪除的時候,iOS頁面會有幾毫秒的閃爍(有灰色的框),Android直接有灰色的框出現在頁面不消失,所以,一開始載入iframe的時候,就將該iframe的樣式設定為:display: none;這樣就解決了這個問題,同時因為display:none這個設置,iframe是脫離文字流的,那麼載入和刪除這個iframe都不會改變文字流,也不會觸發頁面渲染。


相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板