问题：

最近在做一个微信中分享的宣传页，分不同的场景，切换不同的场景时需要设置不同的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. arcgis for android apk太大

    原来大概都要20多M, 太大的原来是.so文件 arcgis for android api里面有armeabi armeabi-v7a  x86的 每个so都接近10m 要是都保留就20多m了 由于 ...

  2. MAVEN教程--01安装|创建|解释

    Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xm ...

  3. 对象字典0x1005和0x1006的理解

    SYNC不一定由主站产生,因此,产生SYNC的节点,0x1005对象的值一般是0x40000080,第30位为1表示本节点产生 SYNC,而本节点的0x1006对象就是产生同步周期值了;而接收SYNC ...

  4. svmtrain和svmpredict简介

    转自:http://blog.sina.com.cn/s/blog_4d7c97a00101bwz1.html 本文主要介绍了SVM工具箱中svmtrain和svmpredict两个主要函数: (1) ...

  5. git使用教程推荐

    Git使用教程 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是 ...

  6. HBase 架构与工作原理2 - HBase 组件

    本文系转载,如有侵权,请联系我:likui0913@gmail.com 一.HBase 组件概览 Master-Slave 模式: HBase 体系结构遵循传统的 master-slave 模式,由一 ...

  7. TP 等框架在配置虚拟主机伪静态注意事项

    在配置虚拟主机的伪静态 .htaccess 文件时需要注意 ? 符号的添加与否处理 例如TP 框架来讲 无 ? 符号,在有的虚拟主机中必须这样配置,否则无法解析(试了多个公司的虚拟主机只要加了?符号就 ...

  8. [cnbeta] 波音系列飞机价格。。。

    https://www.cnbeta.com/articles/tech/786745.htm 单价最便宜的是波音737-700,为0.858亿美元(约合5.96亿元). 评论网友调侃,“你家能满40 ...

  9. Python2X和Python3X的区别

    python2X:源码重复不规范python3X:整合源码,更清晰简单优美.         python2X:默认的编码是ascii  (解决办法为第一行添加 :  #-*- encoding:ut ...

  10. macOS & SVN

    macOS & SVN mac 下已经自带了svn环境; 使用 svn –version 查看版本号 安装方法: 已安装 XCode,只需要在 code > Preferences &g ...