微信浏览器中title的赋值问题

微信浏览器中的title

在qq浏览器中,浏览器内核属于腾讯自己研发的X5浏览器内核(其实就是从chrome内核魔改了一下),而在微信浏览器中,在X5这个本来就是阉割版的内核中,又做了阉割。。。

其中一个比较恶心的问题在于一个网页在微信浏览器中打开时,不管我们给页面设置多少次title,微信浏览器只会抓取一次页面对title的赋值。

1
<title>我是标题</title>
1
document.title = "我也是标题"

如上两段代码同时放在一个页面中,微信浏览器只会做一次赋值,事实上我们正常使用的话也就是显示

1
2
3
4
5
```javascript
document.title = "标题1"
console.log(document.title)//标题1

在开发中会给我们开发造成一种错觉,就是我写的

``` 没有生效。其实不是没有生效,而是微信浏览器内部并没有做title变化的监听,内部处理其实就是title赋过一次值后,不管是``` ``` ``` document.title ``` ,从第二次再赋值title开始,微信浏览器就不监听title的变化书写到微信浏览器的顶部title。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
而在我们实际业务中,遇到一种情况,就是title需要我们动态去获取,也就是必须通过``` document.title ```来动态获取,但是傻逼微信还有个很智障的问题在于当前加载的页面是有可能被缓存住的,而缓存住的页面title实际已经被标记为给title赋过值了,所以会导致js动态加载title会不展示导致微信浏览器中顶部title是空的。
而这个问题其实我们可以通过iframe解决。
```javascript
    document.title = t;
    setTimeout(function(){
        var i = document.createElement('iframe');
        i.style.display = 'none';
        i.src = "http://img4.ffan.com/norm_120/T1eVCTBbdv1RCvBVdK";
        i.onload = function() {
            setTimeout(function(){
                i.remove();
            }, 0)
        };
        document.body.appendChild(i);
    },160)

微信浏览器内核的逻辑是只要有新的页面就会重新给顶部title赋值一次,所以当然iframe也是个页面了,通过上面代码可以看到我们先设置title,然后建立一个iframe,给iframe一个url,加载完成就删掉它,这样就会触发微信浏览器内核的更新页面逻辑,从而重新给title赋值。

1
2
3
4
5
6
7
8
9
10
11
12
document.title = t;
setTimeout(function(){
    var i = document.createElement('iframe');
    i.style.display = 'none';
    i.src = "";//src不能为空
    i.onload = function() {
        setTimeout(function(){
            i.remove();
        }, 0)
    };
    document.body.appendChild(i);
},160)
其中,有一点必须要注意!

一直以为只要加载一个iframe就好了,因为每次引入一个文件或者引入一个网页都是成本,都是流量,所以我试图不加载文件,而这样并不能触发微信浏览器的重新赋值逻辑,所以其内核逻辑看来很明显,必须是加载一个网页或者文件时才会重新赋值title,所以我们也不能节省这些流量,每次都需要加载一个url,当然了,可以是图片,也可以是网页。什么都可以,越小约好啦。

Title问题引发的H5开发问题

这样的内核逻辑导致的问题是,像H5网页中的单页面开发的框架和思想(react、vue、angular之类的前端框架)都无法更换浏览器title,因为它自始至终都没有离开XXX.html,始终都是一个页面,而如果想变化title的话,只能通过上文所述的iframe方法来解决问题,而每一次更换前端路由都需要多加载一个多余的url,不管这个url有多大,对于我们开发都是很恶心的。

目前来讲这个问题完美解决的方法并没有,我提供几种可实施的方案优化:

1、iframe引入url随机化处理

1
2
3
i.src = "http://img1.ffan.com/norm_120/T1eVCTBbdv1RCvBVdK";
i.src = "http://img2.ffan.com/norm_120/T1eVCTBbdv1RCvBVdK";
i.src = "http://img3.ffan.com/norm_120/T1eVCTBbdv1RCvBVdK";

类似于这种随机处理,缓解访问压力,而url流量当然是尽可能的压到最小

2、放弃单页面开发框架

像在微信浏览器中运行的H5页面一般多逻辑,多页面的我们都采用单页面开发来实现我们的需求。这样避免页面跳转,用户体验更好一些,但是如果页面变化而title不跟着变,又很难接受,所以忍痛割爱,直接放弃单页面开发模式,由后端提供路由或直接跳转html实现逻辑。

3、小程序代替H5

毫无疑问2017年的小程序绝对会是大众理论的话题,而且总体来讲,小程序的用户体验和底层框架以及组件都是比较符合当前开发的hybrid开发,底层webview和虚拟dom模式也比较容易让开发者接受,其语法糖虽需要简单研究一下,但也很简单,身边后端朋友写小程序前端也很顺畅。
所有用小程序代替H5绝对是一种从根本解决问题的方法。

实例:

拿京东的公众号举例,京东主商城采用小程序开发,一些订单查询、活动、个人中心页面都处于页面跳转的方式开发的,毕竟这些也都是一些单独的菜单跳转。相对来讲,京东的公众号开发算是比较成熟的,当然我觉得这跟腾讯与京东密切的合作有关吧。

本文结束