JS动态修改单网页web应用在微信浏览器中的title

利用JS动态修改单网页web应用在微信浏览器中的title

最近做一个微信端项目，主要内容都是采用单页面web，之前做微信端，以营销H5居多，绝大多数也都是单网页，营销H5一般一个标题通吃，修改分享标题的情况比较多，而这个如何改，微信提供了相关的工具库。

如果是单网页web的微网站，涉及到有很多不同的page，每个page又有自己的标题，这样就有了动态修改标题的需求。

这是项目index.html文件的title：

显示效果：

某个page页面：

该page页面代码，其实还在index.html 里：

下面为大家介绍一下的方法:

方法一：

document.title = '课程表';

方法二：

document.getElementsByTagName('title')[0].innerHTML = '课程表';

上面这两种方法，在安卓里面是可以运行的，但是在ios上并不生效，第三种方法为ios上的方法。

方法三：

window.setDocumentTitle = function(title) {
        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); 
}

大家可以对用户所用设备进行判断，然后将一二、第三种方法综合使用，实现动态修改单网页web在微信浏览器中的title。

更新：在微信iOS webview更新到WKWebView之前我们可以通过方法三加载iframe来实现单页面应用title更改。

但是17年初更新到WKWebView后该方法也失效，详见微信开发文档> 微信网页开发 > 《iOS WKWebview 网页开发适配指南》

使用WKWebView，在单页应用中通过document.title多次修改原生title的方法将失效，该问题将于微信3月份发布的版本中解决。