vue动态修改微信h5网页标题title

Posted 2022-12-30 coderkey

问题：

想要修改微信网页标题，使用JS修改title，直接document.title=“新标题” 就好了，这样在安卓的微信浏览器是正常运行，可在ios中这样的确不起作用。

---

原因：

由于微信浏览器只在页面首次加载时初始化了标题title，之后就没有再监听 window.title的change事件。

---

方法：

立即创建一个请求，加载一个空的iframe，由于加载后立即就移除，也不会对页面造成影响，但这样微信浏览器上的title便刷新了。

<script>
export default 
  created() 
    // 动态修改微信网页标题
    this.changeTitleClick();
  ,
  methods: 
    // 动态修改微信网页标题
    changeTitleClick() 
      document.setTitle = function (t) 
        document.title = t;
        var i = document.createElement("iframe");
        i.src = "./favicon.ico";
        i.style.display = "none";
        i.onload = function () 
          setTimeout(function () 
            i.remove();
          , 9);
        ;
        document.body.appendChild(i);
      ;
      setTimeout(function () 
        document.setTitle("停车场-有牌车扫码支付");
      , 1);
    ,
  ,
;
</script>

---