解决微信内置浏览器无法动态更新title的问题

1、问题描述

最近在做微信网页开发遇到一个bug,在移动端动态改变title,但浏览器标题并未改变,开始以为是没有设置成功当在控制到打印,window.title 输出的结果是已经修改了

2、问题成因

在一番搜索后找到了具体成因
以下引用原文内容

由于微信浏览器只在页面首次加载时初始化了标题title,之后就没有再监听 window.title的change事件。所以这里修改了title后,立即创建一个请求,加载一个空的iframe,由于加载后立即就移除,也不会对页面造成影响,但这样微信浏览器上的title便刷新了。

3、上代码

原文用的是JQ,这边根据我的需要改为原生代码

let iframe = document.createElement("iframe")
//设置标题
document.title = '这里是要修改成的新标题';
//随便加载点什么
iframe.src="/favicon.ico"
document.body.appendChild(iframe)
//刷新后移除iframe
setTimeout(function() {
     
      document.body.removeChild(iframe)
  }, 0);

4、参考文献

JS动态修改微信浏览器中的title

你可能感兴趣的:(前端)