JS如何設(shè)置iOS中微信瀏覽器的title
說到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)站的支持！
相關(guān)文章
奉獻(xiàn)給JavaScript初學(xué)者的編寫開發(fā)的七個細(xì)節(jié)
每種語言都有它特別的地方，對于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個細(xì)節(jié)，與大家分享。2011-01-01
這篇文章主要介紹了前端代碼規(guī)范的重要性以及Vue項目的編碼規(guī)范,包括組件規(guī)范、模板規(guī)范、指令規(guī)范、標(biāo)簽順序規(guī)范、必須為v-for設(shè)置鍵值、v-show與v-if選擇、script標(biāo)簽內(nèi)部結(jié)構(gòu)順序、VueRouter規(guī)范等具體內(nèi)容,需要的朋友可以參考下2025-01-01
javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼
javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼，需要的朋友可以參考下。2011-08-08
css transform 3D幻燈片特效實現(xiàn)步驟解讀
3D幻燈片特效想必大家以不在陌生至于表現(xiàn)形式一般都是拘泥于傳統(tǒng)接下來為大家介紹下使用css3 transform配合js以及html實現(xiàn)3D幻燈片特效2013-03-03
這篇文章主要給大家介紹了使用JS如何制作簡單的ASCII圖與單極圖的相關(guān)資料，文中介紹的非常詳細(xì)，并在文末給出了詳細(xì)的示例代碼，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要介紹了微信小程序如何播放騰訊視頻的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
js行號顯示的文本框?qū)崿F(xiàn)效果(兼容多種瀏覽器 )
本文主要介紹了javascript實現(xiàn)行號顯示的文本框效果，這樣就可以解決讀者很難迅速找到所在某一行的對應(yīng)代碼，感興趣的小伙伴們可以參考一下2015-10-10
SyntaxHighlighter是一個使用JavaScript編寫的支持多種編程語言語法高亮的JS插件，很多大型網(wǎng)站或博客都在使用?，F(xiàn)在給大家介紹一下如何讓它自動識別加載我們添加的代碼語言2017-02-02
requirejs是一個JavaScript文件和模塊加載器。requireJS允許你把你的javascript代碼獨立成文件和模塊，同時管理每個模塊間的依賴關(guān)系。本文主要對require.js的使用與工作原理進(jìn)行系統(tǒng)介紹。需要的朋友來看下吧2016-12-12
讓多個異步任務(wù)按照我們的想法執(zhí)行，是開發(fā)中常見的需求，今天我們就來捋一下，如何讓多個異步任務(wù)并行，串行，以及并行串行相結(jié)合，感興趣的朋友跟隨小編一起看看吧2023-10-10