iOS微信上如何动态改变了title内容

2017/05/02 javascript

在用Angular开发手机微信端的时候,遇见了一个问题,就是不同的页面它对应的title不一样,而我们使用的是ui-view,header部分是共用的,我们想通过document.title = “new title”;这样的方式来动态改变title的值。

这种方式只能在Android手机上正常使用。在iOS上动态设置却没有效果。

造成这个问题的原因?

单页应用里整个页面只会在第一次完全刷新,后面只会局部刷新(一般不包括head及里面的title),所以无法在服务器端控制title,只能在页面刷新的时候通过js修改title。常规做法是 document.title = "new title";,但是在iOS微信浏览器无效。

因为微信浏览器首次加载页面初始化title后,就再也不监听 document.title的change事件。

如何解决这个问题?

动态添加一个iframe标签,使用iframe来实现伪刷新,刷新成功后title发生改变了,然后立刻移除掉iframe标签。

实现的代码如下所示:

var body = document.getElementsByTagName('body')[0];
document.title = title;
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.setAttribute("src", "http://named.cn/page/take/img/icon_phone.png");
var d = function() {
    setTimeout(function() {
        iframe.removeEventListener('load', d);
        document.body.removeChild(iframe);
    }, 0);
};
iframe.addEventListener('load', d);
document.body.appendChild(iframe);

参考链接

搜索

    目录

    更多最新信息,欢迎关注公众号

    👇🏻

    公众号二维码
    扫码关注「前端知识总结」公众号