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

最后

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

巴特西

改进：js修改iOS微信浏览器的title

问题简介

解决方法

最后

最新文章

热门文章