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> 可以解决了, 没想到在微信浏览 ...
随机推荐
- Scala入门系列（六）：面向对象之object
object object相当于class的单个实例,类似于Java中的static,通常在里面放一些静态的field和method. 第一次调用object中的方法时,会执行object的con ...
- angularJS1笔记-(16)-模块里的constant、value、run
index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 每日站立会议——敏捷流程scrum实践
每日站立会议是敏捷流程scrum中的很重要的一个制度之一. 功能: 1.快速同步进展,让项目组内部的员工互相了解彼此的进展,从而了解本项目的整体进展. 2.给每个人一种精神压力,信守 ...
- jmeter 多线程组间变量共享
jmeter的线程组之间是相互独立的,各个线程组互不影响,所以线程组A中输出的参数,是无法直接在线程组B中被调用的. 但是有时为了方便管理,我们可能是把各个接口单独存放在不同的线程组中.拿Cookie ...
- SQLSERVER 使用XP开头的系统默认存储过程
1. 根据官网上面的内容进行执行命令 EXEC xp_cmdshell 'dir *.exe'; 但是会报错 消息 ,级别 ,状态 ,过程 xp_cmdshell,行 [批起始行 ] SQL Serv ...
- 重温SQL——行转列，列转行
行转列,列转行是我们在开发过程中经常碰到的问题.行转列一般通过CASE WHEN 语句来实现,也可以通过 SQL SERVER 2005 新增的运算符PIVOT来实现.用传统的方法,比较好理解.层次清 ...
- STL 容器的概念
STL 容器的概念 在实际的开发过程中,数据结构本身的重要性不会逊于操作于数据结构的算法的重要性,当程序中存在着对时间要求很高的部分时,数据结构的选择就显得更加重要. 经典的数据结构数量有限,但是我们 ...
- 【刷题】BZOJ 3994 [SDOI2015]约数个数和
Description 设d(x)为x的约数个数,给定N.M,求 Input 输入文件包含多组测试数据. 第一行,一个整数T,表示测试数据的组数. 接下来的T行,每行两个整数N.M. Output T ...
- php的数组转为对象
有时候数组要转为对象操作,用对象的指向操作符,有两种方法 方法一: $arr=['a'=>10,'b'=>100,'c'=>'Hello']; $obj=(Object)$arr; ...
- BZOJ 3165: [Heoi2013]Segment
3165: [Heoi2013]Segment Time Limit: 40 Sec Memory Limit: 256 MBSubmit: 465 Solved: 187[Submit][Sta ...