改進：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都不會改變文本流，也不會觸發頁面渲染，性能會好一些。

最後

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