iOS下预创建的 webview 对象在没有显示过前(即没有调用过show()方法前)调用 webview 对象的 evalJS() 方法延迟严重,大约400毫秒以上,在 webview 对象调用过show()方法之后则一切正常,调用 evalJS() 方法时则不再有严重延迟,Android 下则没有这个问题,iOS上的这个问题这对于通过调用目标页面的 evalJS() 来控制目标页面何时显示有着很大的体验差别,虽然可以通过代码来进行差别设计,但我认为这个小问题的解决可以带来更好的通用性,因为多数情况下 Android 需要通过预加载来提高页面切入效果。
以下代码在 iOS下第一次 clickMe() ,目标页面的显示延迟严重
<p style="font-size: 30px;" onclick="clickMe()">点我</p>
<script src="js/fastclick.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
var headWebview;
// iOS 在 headWebview 预先创建后并且没有调用过 show() 方法的情况下,调用 headWebview 的 evalJS() 方法时延迟严重,大约400毫秒以上,在 headWebview 调用过 show() 方法之后再次调用 evalJS() 方法就一切正常如初了 ,Android 则没有该问题
function clickMe() {
headWebview && headWebview.evalJS('show()');
}
function plusReady() {
headWebview = plus.webview.create('head.html', 'head', {hardwareAccelerated: true,popGesture:'hide'});
headWebview.addEventListener('loaded', function() {
console.log('headWebview 加载完成');
});
headWebview.addEventListener('hide', function() {
console.log('headWebview 隐藏');
});
headWebview.addEventListener('show', function() {
console.log('headWebview 显示');
});
}
if(window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady);
}
</script>
下面是目标页面代码:
<script>
function plusReady() {
plus.key.addEventListener('backbutton', function(){
plus.webview.currentWebview().hide('auto');
});
console.log('head plus ready.');
}
if(window.plus) {
plusReady();
} else {
document.addEventListener('plusready', plusReady);
}
function show() {
plus.webview.currentWebview().show('pop-in', 200);
}
</script>
运行环境
[系统版本]
ios 9.3.1
[IDE版本]
HBuilder 7.6.3.201612161809