JS 在iOS微信和QQ动态更新导航栏标题的简单示例

前端之家收集整理的这篇文章主要介绍了JS 在iOS微信和QQ动态更新导航栏标题的简单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
在单页应用中,由于页面切换不会导致浏览器重新加载页面,所以页面标题是不会改变的,这时候就要通过Javascript去修改标题。这个操作本来是非常简单的,只需要修改「document.title」即可:

document.title = 'New title';
在iOS的微信和QQ中,具体的现象就是:导航栏上的标题没有改变。这是iOS微信和QQ的bug,解决方法就是在修改「document.title」之后,用「iframe」发送一个请求(任意一个请求)。

把相关的代码封装成函数

/**
 * 动态更新导航栏标题
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
function setTitle(title) {
    document.title = title;
    if (isIOS && (isInWeixin || isInQQ)) {
        let iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = '/favicon.ico';
        iframe.onload = () => {
            setTimeout(() => {
                document.body.removeChild(iframe);
            },9);
        };
        document.body.appendChild(iframe);
    }
}

// 来自:编程之家 jb51.cc(jb51.cc)

猜你在找的JavaScript相关文章