JS动态更新微信浏览器中的title
问题：
最近在做一个微信中分享的宣传页，分不同的场景，切换不同的场景时需要设置不同的title，实现的方案很简单，当用户切换场景的时候，修改document对象的title属性，可是在实际测试中，ios微信确不起作用。
解决思路：
首先怀疑ios微信不支持，document.title修改头部修改，但是我们经过测试，如果页面首次加载直接修改title属性是可以实现的。所以这里原因有可能就是只在页面首次加载时初始化了标题title，之后就没有再监听 window.title的change事件，所以我们这里只需要想办法触发window.title的监听事件。
解决方案：
这里我们采用了hack来解决。当我们修改了title后，立即创建一个请求，加载一个空的iframe，从而触发window.title的监听。然后我们立即移除空请求，保证不会对页面造成影响。
实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="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>
<script type="text/javascript">
setTimeout(function(){
setTitle('title修改了')
}, 2000); function setTitle(title){
document.title = title || document.title;
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger" && !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/i)){
var ifr = document.createElement('iframe')
ifr.src = "/favicon.ico";
ifr.onload = function() {
setTimeout(function(){
ifr.remove();
}, 0)
}
document.body.appendChild(ifr);
}
}
</script>
</html>
JS动态更新微信浏览器中的title的更多相关文章
- JS动态修改微信浏览器中的title
JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...
- UEditor js动态创建和textarea中渲染【原】
UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...
- js判断是否是在微信浏览器中打开
// js判断是否是在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/Mi ...
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...
- 使用命令动态更新JAR包中的文件
动态更新JAR包中的文件,经本人实际测试可正常执行! 一.查询jar包中要替换的文件位置 jar -tvf gateway.jar | grep topjui.config.js 二.在当前 ...
- JS判断是否微信浏览器
JS判断是否微信浏览器 function isWeixinBrowser(){ var ua = navigator.userAgent.toLowerCase(); return (/microme ...
- WPF中动态更新TextBlock文字中的超链接，文本
1.------------------------------------------------------------------------- 修改超链接的文本文字: <TextBloc ...
- 解决微信浏览器中无法一键拨号问题tel
公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为 <a href="tel:10086">10086</a> 可以解决了, 没想到在微信浏览 ...
随机推荐
- opencv的安装和卸载
安装 测试环境为centos 安装依赖 yum install cmake gcc gcc-c++ gtk2-devel gimp-develgimp-devel-tools gimp-help-br ...
- C/C++ 打印文件名、行号、函数名的方法
转自:http://zhidao.baidu.com/link?url=JLCaxBAXLJVcx_8jsyJVF92E_bZjo4ONJ5Ab-HGlNBc1dfzcAyFAIygwP1qr18aa ...
- lr关联-保存数组并调用（转）
LOADRUNNER中的一个关联技巧 众所周知,在LoadRunner中,关联是一个很重要的动作,大多数的脚本在录制完成后并不能直接回放,需要通过一定的关联才能成功回放.关联的技巧有很多,这里 ...
- Teamcity部署.net服务“无法连接到远程服务器”解决方式
在公司Teamcity上执行自动部署.net服务的时候,发现Teamcity在启动default.aspx的时候报错了,提示:使用“0”个参数调用“GetResponse”时发生异常:“无法连接到远程 ...
- node入门学习(一)
一.安装node.js 方式很多npm,git等,新手建议从官网上直接去下载node的安装包.一键安装. 二.创建一个web服务器. const http = require('http'); htt ...
- 小程序 获取用户的openid
wx.login({ success: res => { var code = res.code; //返回code // 小程序appid var appId = 'wxd751fc845c9 ...
- 初入码田--ASP.NET MVC4 Web应用开发之一 实现简单的登录
初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查 2016-07-24 一.创建T4模板,建 ...
- Python fullstack系列【1】:初识Python
Python简介 Python的前世今生: Python诞生于1989年的圣诞节期间,其作者是吉多·范罗苏姆(Guido van Rossum).当时Guido(江湖人称龟叔)在阿姆斯特丹度假时着手开 ...
- java中的==操作符和equals函数
基本规则 “==”操作符的使用需要分成两种情况 判值类型相等 这一点很好理解,两个值类型代表的数值相等,则“==”表达式返回true “==”可以用与不同值类型的比较,语言会自动进行类型转换 判引用类 ...
- Qt——常用控件样式
下面是我设计.调整.修改的Qt控件样式,仅供参考. Github地址:https://github.com/ikongziming/QtDemo/tree/master/StyleSheetDemo ...