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> 可以解决了, 没想到在微信浏览 ...
随机推荐
- BufferedWriter与BufferedRead --------------------------Test
package com.test; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; ...
- Internet History, Technology and Security (Week6)
Week6 The Internet is desinged based on four-layer model. Each layer builds on the layers below it. ...
- Ubuntu恢复被误删的文件
主要内容转载自博客:https://blog.csdn.net/YLD10/article/details/80241160 写在前面,该方法只能用于误删的文件,若文件被覆盖,则无法恢复. 1.下载工 ...
- JAVA自学日记——Part Ⅰ.
和C++比较相似,Java同样是面向对象的设计语言,在基础的语句上有一些不大的差别,经过两天的学习,大概的了解了在eclipse中如何进行简单的编程,解决一些简单的问题,诸如在学习C时做过的“字符串倒 ...
- 项目复审-Bata阶段
项目复审-Bata阶段 小组的名字和链接 优点 缺点 名次 别看了你没救了 https://www.cnblogs.com/liaoyujun233/p/9148781.html 基本功能都已经实现, ...
- Python入门：条件控制
条件控制其实就是if...else...(如果...条件是成立的,就做...:反之,就做...)的使用,其基本结构是: 具体看下面这个例子: def account_login(): # 定义函数 p ...
- 第二版_TestNG+Excel+(HTTP+JSON) 简单接口测试
---------------------------------------------------------------------------------------------------- ...
- [转帖]Oracle字符集的查看与修改 --- 还未尝试 找个周六 试试.
Oracle 字符集的查看和修改 感谢原作者 改天试试 https://www.cnblogs.com/rootq/articles/2049324.html 一.什么是Oracle字符集 Oracl ...
- swusec的构想，顺便送开学福利——校园网一号多登录演示
前言: 我不是什么大牛,我只想通过我的努力,打造swu网络安全爱好者的圈子.期待你加入. swusec是什么? swusec (SouthWestUniversity SecurityTeam),西南 ...
- vue & button & refs & click & bug
vue & button & refs & click & bug $refs.btn.click() ??? vue & refs $refs.btn.$em ...