如何通过 js 修改微信浏览器的title
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何通过 js 修改微信浏览器的title相关的知识，希望对你有一定的参考价值。
参考技术A 通过 js 修改微信浏览器的title方法：可以通过以下代码来修改微信浏览器的title
<title>Origin</title>
<title>Overwrite Origin</title>
<script>
var sum = 0;
document.onclick = function()
sum ++;
// 获取页面上所有title标签对象数组
var titles = document.getElementsByTagName("title");
// 总共有多少个title标签，这两行只是用于更方便理解这段代码，没有实际意义
var len = titles.length;
// 这一行会弹出“Overwrite Origin”，虽然它并没有被解析为本页面显示的title，但仍然是DOM树上的一个文本节点，可以被JS调用到，要修改title内容并不是修改此节点，下面一行注释会进行说明
alert(titles[len - 1].innerText);
// 浏览器在遇到第一个title标签后会将其内容作为title内容，忽略之后的title标签解析，所以JS需要改变第一个title标签的innerText子节点达到目的
titles[0].innerText = "Title changed for " + sum + " time" + (sum < 2 ? "!" : "s!");
// 原先的title上显示着“Origin”，点击一次后更改为“Title changed for 1 time!”，点击两次后更改为“Title changed for 2 times!”，以此类推
</script>
这段代码不仅仅是应用于微信浏览器，也应用于其他webkit内核浏览器。
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的主要内容，如果未能解决你的问题，请参考以下文章