改进：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都不会改变文本流，也不会触发页面渲染，性能会好一些。

最后

我相信前面还有无数的坑，可是一路过来积累的分析问题，解决问题的方法会使我更加自信。年轻人最重要就是脚踏实地，厚积薄发，加油。