今天遇到这么一种情况，
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>被重新渲染。
以下两个为留存疑问，有时间研究一下再补充，
- 上面两种代码为什么一个可以用一个不可以？区别在哪？
- 底层的原理是什么？
