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

本文介绍在微信浏览器中动态修改单页Web应用标题的方法,包括针对不同操作系统的解决方案及注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

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

这是项目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月份发布的版本中解决。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值