问题：

最近在做一个微信中分享的宣传页，分不同的场景，切换不同的场景时需要设置不同的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. Android里面安装windows系统

        安装前请确认以下条件:①:存储卡需要有大于302M的空间. 下载安装:1.下载文件并安装:①:下载地址:http://kuai.xunlei.com/d/hWIkAAIkJwAawgZUa3c ...

  2. Spring笔记⑥--整合struts2

    Spring如何在web应用里面用 需要额外加入的jar包 Spring-web-4.0.0 Spring-webmvc-4.0.0 Spring的配置文件,没什么不同   需要在web.xml下配置 ...

  3. 福州大学软工1816 K 班助教总结

    春节时期总有各种诱惑因素(例如路人超能第二季),拖到现在才发布十分抱歉orz. 一.感谢 首先对柯老师和软工助教指导团队这一学期以来的支持和指导表示感谢.第一次做助教,有时候会提出一些不大成熟的想法, ...

  4. 学术诚信与职业道德——《构建之法》P384~391读后感

    程序本身没有伦理和职业道德, 但是程序员和软件企业要有,因为程序员明白伦理道德的存在. 对于刚刚经历被不负责队友抛下的经历,对此很有感触,软件工程师除了遵守任务做事,也要考虑道德上.责任上的事情. 就 ...

  5. PAT 甲级 1010 Radix

    https://pintia.cn/problem-sets/994805342720868352/problems/994805507225665536 Given a pair of positi ...

  6. #Leetcode# 817. Linked List Components

    https://leetcode.com/problems/linked-list-components/ We are given head, the head node of a linked l ...

  7. sqlserver 修改表字段长度

    ALTER TABLE Table1 ALTER COLUMN column1 VARCHAR(255)

  8. python 创建目录

    Python对文件的操作还算是方便的,只需要包含os模块进来,使用相关函数即可实现目录的创建. 主要涉及到三个函数 1.os.path.exists(path) 判断一个目录是否存在 2.os.mak ...

  9. [转帖] 固定硬盘接口 U.2和M.2

    U.2接口 U.2接口别称SFF-8639,是由固态硬盘形态工作组织(SSD Form Factor Work Group)推出的接口规范.U.2不但能支持SATA-Express规范,还能兼容SAS ...

  10. 【版本管理】git本地操作

    1.初始化一个Git仓库,使用git init命令. 2.添加文件到Git仓库,分两步: • 第一步,使用命令git add 文件名,注意,可反复多次使用,添加多个文件: • 第二步,使用命令git ...