JS 在iOS微信和QQ动态更新导航栏标题的解决办法

内容摘要
这篇文章主要为大家详细介绍了JS 在iOS微信和QQ动态更新导航栏标题的简单示例,具有一定的参考价值,可以用来参考一下。

对此感兴趣的朋友,看看idc笔记做的技术笔记。在单页应
文章正文

这篇文章主要为大家详细介绍了JS 在iOS微信和QQ动态更新导航栏标题的简单示例,具有一定的参考价值,可以用来参考一下。

对此感兴趣的朋友,看看idc笔记做的技术笔记。在单页应用中,由于页面切换不会导致浏览器重新加载页面,所以页面的标题是不会改变的,这时候就要通过Javascript去修改标题。这个操作本来是非常简单的,只需要修改「document.title」即可:

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

/**
 * 动态更新导航栏标题
 *
 * @param 
 * @arrange (www.idcnote.com)
 **/
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);
  }
}

// 来自:php教程(www.idcnote.com)

注:关于JS 在iOS微信和QQ动态更新导航栏标题的简单示例的内容就先介绍到这里,更多相关文章的可以留意

代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!