问题：

最近在做一个微信中分享的宣传页，分不同的场景，切换不同的场景时需要设置不同的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. Task 5.1 电梯调度程序需求调研报告

    1.任务概述: 1.1任务背景:试想一下,石家庄铁道大学基础教学楼的电梯配置如下:大厦有18层, 4部电梯,很多乘客使用这些电梯的日常(旅客重量:平均70公斤最大120公斤,最小45公斤).其他常量数 ...

  2. Linux手动添加系统环境共享库路径

    1.在以下目录 #/etc/ld.so.conf.d 添加相应的xxx.conf 2.写入所要共享库的路径 如:/usr/lib/ 3.导入共享库配置 $ldconfig

  3. 在onResume()中调用getIntent()得不到Extra的问题

    之前 想做activity间的传值,注意 不是 startActivityforResult的那种, 在启动了多层activity再次启动activity想进入到singleTask的MainActi ...

  4. java异常处理及自定义异常的使用

    1. 异常介绍 异常机制可以提高程序的健壮性和容错性. Throwable:Throwable是java语言所有错误或异常的超类. 有两个子类Error和Exception. 1.1 编译期异常 编译 ...

  5. Head First Java & 构造函数

        java继承中对构造函数是不继承的,只是调用(隐式或显式). ----------------------------------------------------------------- ...

  6. 集合由量大接口派生来：Collection 和 Map

    Collection - 存放单个数据 |-List 实现类:ArrayList(Vector) LinkedList  Vector的子类Stack |-Set 实现类:HashSet   Tree ...

  7. dotTrace快速帮助你定位C#代码的性能瓶颈

    dotTrace 1.     问题描述 IIS发布的接口运行一段时间后变的很慢,重启IIS连接池后问题得到解决,但是运行一段时间后再次出现变慢的问题 2.     问题原因 程序中有读取xml文件的 ...

  8. gitlab修改root密码

    在root用户下,执行 [root@localhost gitlab]# sudo gitlab-rails console production -------------------------- ...

  9. [转帖]PCI-E的部分知识

    PCI-E PCI-E全称是PCI Express,是新一代的总线接口.采用了目前业内流行的点对点串行连接,比起PCI以及更早期的计算机总线的共享并行架构,每个设备都有自己的专用连接,不需要向整个总线 ...

  10. multi thread for Java

    I try to do a testing for HashTable Sychronized behavior today. As an Sychronized Object, HashTable ...