改進：js修改iOS微信瀏覽器的title

問題簡介

前端入門沒多久，可能連入門也不算，最近網上流行各自書籍更名，什麼《前端開發，從入門到放棄》，《Android開發，從入門到改行》之類的，程序員真是個愛自嘲的羣體，但咱們必定是積極而向上的。

說到web前端，瀏覽器差別是不可迴避的問題，此次的問題（知乎上的討論）以下：

單頁應用裏整個頁面只會在第一次徹底刷新，後面只會局部刷新（通常不包括head及裏面的title），因此沒法在服務器端控制title，只能在頁面刷新的時候經過js修改title。常規作法以下，惋惜在iOS微信瀏覽器無效。

document.title = "the title you want to set";

解決方法

var $body = $('body'); document.title = 'the title you want to set'; var $iframe = $("<iframe 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直接有灰色的框出如今頁面不消失。

一開始並無發現問題出在這裏，後來經過git版本回退比較，才定位到問題。既然是由於這個iframe顯示和隱藏給頁面顯示形成了影響，那一開始加載iframe的時候，就將該iframe的樣式設置爲：

display: none;

改進的代碼以下：

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);

這樣就解決了這個問題，同時由於display：none這個設置，iframe是脫離文本流的，那麼加載和刪除這個iframe都不會改變文本流，也不會觸發頁面渲染，性能會好一些。

最後

我相信前面還有無數的坑，可是一路過來積累的分析問題，解決問題的方法會使我更加自信。年輕人最重要就是腳踏實地，厚積薄發，加油。