JS动态更新微信浏览器中的title

问题：

最近在做一个微信中分享的宣传页，分不同的场景，切换不同的场景时需要设置不同的title，实现的方案很简单，当用户切换场景的时候，修改document对象的title属性，可是在实际测试中，ios微信确不起作用。

解决思路：

首先怀疑ios微信不支持，document.title修改头部修改，但是我们经过测试，如果页面首次加载直接修改title属性是可以实现的。所以这里原因有可能就是只在页面首次加载时初始化了标题title，之后就没有再监听 window.title的change事件，所以我们这里只需要想办法触发window.title的监听事件。

解决方案：

这里我们采用了hack来解决。当我们修改了title后，立即创建一个请求，加载一个空的iframe，从而触发window.title的监听。然后我们立即移除空请求，保证不会对页面造成影响。

实现代码：

<!DOCTYPE html>
<htmllang="zh-CN"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><metaname="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>测试</title></head><body></body><scripttype="text/javascript">setTimeout(function(){setTitle('title修改了')},2000);functionsetTitle(title){document.title=title||document.title;varua=navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger" && !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/i)){varifr=document.createElement('iframe')ifr.src= "/favicon.ico";ifr.onload= function() {setTimeout(function(){ifr.remove();},0)}document.body.appendChild(ifr);}}</script>
</html>

转载于:https://www.cnblogs.com/caizhenbo/p/6531448.html

JS动态更新微信浏览器中的title相关推荐

JS动态修改单网页web应用在微信浏览器中的title
利用JS动态修改单网页web应用在微信浏览器中的title 最近做一个微信端项目,主要内容都是采用单页面web,之前做微信端,以营销H5居多,绝大多数也都是单网页,营销H5一般一个标题通吃,修改分享标 ...
js判断是否在微信浏览器中打开
js判断是否在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroM ...
Js判断是否在微信浏览器中打开和微信版本号
一.判断微信版本号 var wechatInfo = navigator.userAgent.match(/MicroMessenger\\/([\\d\\.]+)/i) ; if( !wechatI ...
Vue项目在微信浏览器中使用支付宝支付
本人vue 小白之前在公司接触vue商城项目,其中包含了微信支付和支付宝支付,由于微信会拦截支付宝支付页面.当时这个问题困惑我蛮久的,所以今天记录一下,方便日后再次遇到方便查询. 废话不多说. 给兄 ...
h5页面提示只能在微信浏览器中打开_h5移动端开发判断只能在微信浏览器打开...
在开发的过程中可能会遇到项目只能在微信浏览器打开的需求,那么只需要在项目的页面添加以下代码即可(单页面应用在入口文件添加即可). var ua = navigator.userAgent.toLowe ...
微信浏览器中进行支付宝支付
B端项目使用的是支付宝手机网页支付,微信浏览器中屏蔽了支付宝的功能.上有政策下有对策,支付宝也有应对的办法,下来就来说一说支付宝手机网站支付. 第一步:开发准备工作登录支付宝平台(需要实名认证的支付 ...
支付宝网站支付在微信浏览器中跳转问题(亲测,附源码)
文章目录前言具体步骤配置沙箱回调地址,修改代码支付宝网关准备加密js以及跳转html 源码下载地址前言奉上整理好的测试url: 点我调用支付宝之前的博客中提到了使用支付宝提供的sdk实现 ...
php判断微信浏览器跳转页面跳转,判断当前网页是否在微信浏览器中打开
这几天一直在与微信内置的浏览器打交道,也总结出一些如何判断当前浏览器环境是否为微信浏览器的小经验(其实代码网上一搜一大把),今天记录一下. 判断网页是否在微信浏览器中打,一般都是通过请求头信息中的HT ...
php 公众号内h5支付宝支付宝支付宝支付宝支付,微信浏览器中支付宝wap支付和微信JSAPI公众号支付...
手机浏览器只有支付宝wap支付,微信浏览器中出现支付宝wap支付和微信JSAPI公众号支付,其中支付宝wap在线支付没有在新窗口打开(兼容大部分手机),Thinkphp3.2公众号支付下载资源下载 ...

JS动态更新微信浏览器中的title

JS动态更新微信浏览器中的title相关推荐

最新文章

热门文章