window.location.href 加载完成修改title_动态修改document.title失效-CSDN博客

背景：如果页面title是异步获取的数据，那么拿到数据直接使用document.title会在ios低版本出现失效的问题，因为页面加载完成后title被确定，此后不再监听title的change事件

解决方法：获取到数据后，动态创建iframe标签，src指向一个非常小的资源，监听load事件，加载完成立即删除即可更新title

代码：

      document.title = this.title;
      let iframe = document.createElement('iframe');
      iframe.src = require('/favicon.ico');
      iframe.style.display = 'none';
      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：由于只是部分ios的微信浏览器有此现象，所以不需要对所有设备进行此操作，可进行判断

iphone8P 微信 useragent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 MicroMessenger/7.0.8(0x17000820) NetType/WIFI Language/zh_CN

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

该方案无法解决的问题：

ios safari的地址栏显示域名，无法通过此方法修改title

安卓部分野鸡浏览器（安卓低版本自带浏览器）显示的是完整url

如果你有解决方案，欢迎讨论 :D