问题：

最近在做一个微信中分享的宣传页，分不同的场景，切换不同的场景时需要设置不同的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. 《TCP/IP 详解 卷1：协议》第 4 章：地址解析协议

    链路层是经过单一链路通信的协议层. IP 网络层协议的设计目标是为跨越不同物理类型的.多节点网络的 packet ,提供主机寻址.路由操作. 在其中要注意的一点是:网络层使用的地址和底层网络硬件使用的 ...

  2. java常见字符集

    ASCII 名称由来 ASCII(American Standard Code for Information Interchange,美国信息互换标准编码)是基于罗马字母表的一套电脑编码系统.[1] ...

  3. 牛客网国庆集训派对Day5 题目 2018年

    链接:https://www.nowcoder.com/acm/contest/205/L来源:牛客网参考博客:https://blog.csdn.net/HTallperson/article/de ...

  4. Week4-作业1

    第四章        这一章主要讲了代码规范.复审和团队合作这两项内容.        在关于代码设计规范方面,书中讲到了关于goto的使用:        “函数最好有单一的出口,为了达到这一目的, ...

  5. H5页面的滚动条在windows浏览器下始终看到(灰色的不可用的)

    一般这种情况是在某些相关的div上设置了overflow:scroll属性,在mac系统的浏览器下均没有滚动条显示而在windows下的各个浏览器上均可以看到灰色的不可用的滚动条,这种情况我们需要在b ...

  6. 父元素如果为none，子元素也是看不到的

    1.最近遇到一个问题,就是获取一个子元素的offsetwidth 的值总是为0 .原因是因为把父元素给设置成none了. 2.给元素赋值宽高 div.style.width=330+'px' 要加上p ...

  7. 搭建zabbix详细步骤

    关闭selinux和防火墙 selinux关闭: 1 命令查看出selinux的状态sestatus -v2 临时关闭 selinuxsetenforce 03 永久关闭selinuxvi /etc/ ...

  8. Scrum Meeting Beta - 5

    Scrum Meeting Beta - 5 NewTeam 2017/12/4 地点:主楼2楼走廊 任务反馈 团队成员 完成任务 计划任务 安万贺 完成了离线状态进入app的功能 实现离线状态读取本 ...

  9. Beta阶段DAY3

    一.提供当天站立式会议照片一张 二.每个人的工作 1.讨论项目每个成员的昨天进展 刘阳航:尝试改进UI,美化界面. 林庭亦:调整难度设置. 郑子熙:尝试改进UI,美化界面. 陈文俊:调整难度设置. 2 ...

  10. delphi中将一个ADOQuery查询的数据结果传递给一个动态生成的ADOQuery

    delphi中将一个ADOQuery查询的数据结果传递给一个动态生成的ADOQuery 2010-03-10 17:35 方法一: beginADOQuery:=TADOQuery.Create(Ap ...