问题:

最近在做一个微信中分享的宣传页,分不同的场景,切换不同的场景时需要设置不同的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的更多相关文章

  1. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  2. UEditor js动态创建和textarea中渲染【原】

    UEditor动态创建和textarea中渲染 http://ueditor.baidu.com/website/examples/textareaDemo.html <!DOCTYPE> ...

  3. js判断是否是在微信浏览器中打开

    // js判断是否是在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/Mi ...

  4. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  6. 使用命令动态更新JAR包中的文件

    动态更新JAR包中的文件,经本人实际测试可正常执行! 一.查询jar包中要替换的文件位置 jar  -tvf  gateway.jar  |  grep  topjui.config.js 二.在当前 ...

  7. JS判断是否微信浏览器

    JS判断是否微信浏览器 function isWeixinBrowser(){ var ua = navigator.userAgent.toLowerCase(); return (/microme ...

  8. WPF中动态更新TextBlock文字中的超链接,文本

    1.------------------------------------------------------------------------- 修改超链接的文本文字: <TextBloc ...

  9. 解决微信浏览器中无法一键拨号问题tel

    公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为 <a href="tel:10086">10086</a> 可以解决了, 没想到在微信浏览 ...

随机推荐

  1. Go going软件NABCD

    N  (Need 需求):gogoing项目目前打算做得是一个基于石家庄铁道大学在校大学生对于短期节假日出行旅游的指南.次关键的定义为“简单”.“简单”则体现在我们的软件使用简单.方便,以及界面的简洁 ...

  2. 1~n中1的和

    题目:给定一个十进制的正整数,写下从1开始,到N的所有整数,然后数一下其中出现“1”的个数: 要求:写一个函数f(n),返回1到n之间出现“1“的个数, 思路: 1.先判断这个数共多少位,假设为n位: ...

  3. PHP面试题一

    http://www.viphper.com/?p=28 1.用PHP打印出前一天的时间格式是2006-5-10 22:21:21(2分) $a = date("Y-m-d H:i:s&qu ...

  4. SCRUM:周日周一任务实现情况

    1.设计.制作欢迎界面 2.对杰龙注册界面进行重设计和规范strings     →         →         →    

  5. appium遇到问题总结(不断更新)

    问题1 执行脚本 报错: java.lang.NoSuchMethodError: org.openqa.selenium.remote.ErrorHandler.<init>(Lorg/ ...

  6. IE 低版本 透明度

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. DAY3-Flask项目

    1.jsonify: 得到了从API获得的数据并返回,API返回的json数据被转化成dict,我们还需要把dict序列化: return json.dump(result), 200, {'cont ...

  8. mysql事务隔离级别设置

    设置innodb的事务级别方法是:set 作用域 transaction isolation level 事务隔离级别: 若没有输入作用域直接修改transaction isolation,显示修改成 ...

  9. [AT2384] [agc015_f] Kenus the Ancient Greek

    题目链接 AtCoder:https://agc015.contest.atcoder.jp/tasks/agc015_f 洛谷:https://www.luogu.org/problemnew/sh ...

  10. 【bzoj4542】 Hnoi2016—大数

    http://www.lydsy.com/JudgeOnline/problem.php?id=4542 (题目链接) 题意 给出一个素数$P$,一个数串$S$,$m$个询问,每次询问区间$[l,r] ...