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，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！