利用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更改。
但是初更新到WKWebView后该方法也失效,详见微信开发文档> 微信网页开发 > 《iOS WKWebview 网页开发适配指南》
使用WKWebView,在单页应用中通过document.title多次修改原生title的方法将失效,该问题将于微信3月份发布的版本中解决。