关于webview无法设置页面标题

今天遇到这么一种情况，
hybrid列表页item点击后跳转到详情页，同时将详情id传到详情页，详情页发送ajax请求把内容填入dom中。
这种情况下webview中的<title>会为空，因为webview抓取内容渲染页面是发生在js将内容填充到<title>之前的，因此渲染的时候<title>是空。

正确的流程应该是这样：

1. webview获得title字段
2. webview将title字段填入<title>中
3. webview渲染<title>与展示<title>标签

此时的流程为：

//这个流程是错误的，导致结果就是开头的问题
1. （3）webview渲染与展示了一个空的<title>
2. （1）webview获得title字段
3. （2）webview将title字段填入<title>中

网上找到解决方案如下：

//----------代码块  1 -------------
//需要jQuery 
var $body = $('body'); 
document.title = 'test'; 
// hack在微信等webview中无法修改document.title的情况 
var $iframe = $('<iframe src="/favicon.ico"></iframe>'); 
$iframe.on('load',function() { 
    setTimeout(function() { 
        $iframe.off('load').remove(); 
    }, 0); 
}).appendTo($body);

以上方案是确实可以改变<title>的，但是大部分需要js改变<title>的情况都是需要发送ajax请求从后台获取title再填充到<title>中的，此时把上面的代码放入ajax的回调函数中，失效。

将以下代码放到回调之外，发现未生效，因此断定在下一个event loop中调用代码块1会失效

//--------- 代码块 2 --------------
//在代码块1放入setTimeout中模拟回调函数
setTimeout(function(){
    //需要jQuery 
    var $body = $('body'); 
    document.title = 'test'; 
    // hack在微信等webview中无法修改document.title的情况 
    var $iframe = $('<iframe src="/favicon.ico"></iframe>');
    $iframe.on('load',function() { 
        setTimeout(function() { 
            $iframe.off('load').remove(); 
        }, 0); 
    }).appendTo($body);
},0);

再到网上搜，找到另外一种纯js写法，是OK的，原理一样，只是不依赖jq

//以下代码可以解决以上问题，不依赖jq
//放入回调函数中请自行取掉setTimeout
setTimeout(function(){
    //利用iframe的onload事件刷新页面 
    document.title = 'test'; 
    var iframe = document.createElement('iframe');
    iframe.style.visibility = 'hidden'; 
    iframe.style.width = '1px'; 
    iframe.style.height = '1px'; 
    iframe.onload = function () { 
        setTimeout(function () {
            document.body.removeChild(iframe); 
        }, 0); 
    }; 
    document.body.appendChild(iframe);
},0);

总结

webview下js改变title无法生效的问题我在去年遇到过，当时不知道怎么解决了，这是个古老的问题，但是貌似没有什么正统的解法。以上两种代码——依赖与不依赖jq，其原理都是利用iframe的加载可以局部刷新页面，从而使<title>被重新渲染。

作者：非朽非木
链接：https://www.jianshu.com/p/7372ac57b8ea
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。