js：动态修改document.title失效问题

问题

当在页面异步调接口，拿到 title 后赋值给 document.title，无法修改标题。

原因

页面加载完后 title 已经确定了，所以不再监听 title 的 change 事件。

解决

document.title = this.title;
let iframe = document.createElement('iframe');
iframe.src = require('/favicon.ico');
iframe.style.display = 'none';
// 这个就是我们异步获取 title 的函数
let fn = function () {
  setTimeout(function () {
    iframe.removeEventListener('load', fn);
    document.body.removeChild(iframe);
    console.log('title', document.title);
  }, 0);
};

iframe.addEventListener('load', fn);
document.body.appendChild(iframe);

原理

iframe是内联框架元素，可以将另一个html元素嵌入到当前页面，当异步获取到数据后，动态创建的iframe根据指定src发送请求，从而触发title的监听，加载完后移除不会对页面造成影响。

兼容性

由于只是部分ios的微信浏览器有此现象，所以不需要对所有设备进行此操作，可进行判断

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger" && !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/i)){
   ...iframe操作
}