附上测试代码：
bg-index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>main webview</title>
<link href="css/mui.css" rel="stylesheet"/>
<style>
body {
background-color:#eeeeee;
font-size:12px;
}
.mark {
position:absolute;
left:0px;
width:10px;
border-top:1px solid black;
}
</style>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.plusReady(function() {
createRuler();
plus.key.addEventListener('backbutton', function(evt) {
plus.runtime.quit();
});
});
function create(bg)
{
var styles = {
top: 100,
left: 10,
width: 200,
height: 200
};
if (bg) {
styles.background = '#008800';
}
var sub = plus.webview.create('bg-subview.html', 'bg-subview', styles);
sub.show('pop-in', 2000, function() {
plus.webview.currentWebview().append(sub);
});
}
function createRuler()
{
// 显示一组标志线，便于观察坐标位置
for (var i=0; i < 1000; i += 10) {
var mark = document.createElement('div');
mark.className = 'mark';
mark.style.top = i + 'px';
document.body.appendChild(mark);
}
}
</script>
</head>
<body>
<button onclick="create(false)">无background（正常）</button>
<button onclick="create(true)">有background</button>
<ol>验证结论：
<li>子webview如果设置了background，则left/top被加倍</li>
<li>webview如果设置了background，则mask失效</li>
<li>设置了background之后，show('pop-in')的显示效果异常</li>
</ol>
</body>
</html>
bg-subview.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>sub webview</title>
<link href="css/mui.css" rel="stylesheet"/>
<style>
body {
border:2px solid blue;
margin:0px;
padding:0px;
background-color:lightgreen;
}
</style>
<script src="js/mui.js"></script>
<script type="text/javascript">
mui.plusReady(function() {
plus.webview.currentWebview().addEventListener('maskClick',function(event) {
console.log('maskClick');
plus.webview.currentWebview().setStyle({mask: 'none'});
});
});
function mask()
{
plus.webview.currentWebview().setStyle({mask: 'rgba(0,0,0,0.5)'});
}
</script>
</head>
<body>
<div>bg-subview</div>
<button onclick="plus.webview.currentWebview().close()">close</button>
<button onclick="mask()">mask</button>
</body>
</html>
2 个回复
maq (作者)
附上测试代码：
bg-index.html
bg-subview.html
maq (作者)
也许有人会问：干嘛要用这个 background 呢？
是哈，我也觉得这个 background 没啥实际用途，所以前面报了那个 BUG 之后也就没太在意，不用也罢。不过最近又重提这个问题，说来实在是悲催～～
在某配置不高的 Android 手机上，出现一个奇怪的现象，当一个覆盖整个屏幕的 webview B 被 hide() 之后，露出下面的另一个 webview A，结果 A 里面的网页内容显示模糊！试了各种办法，最终竟然发现如果给 B 设置了 background，就不会出现这个现象了。
这当然不是一个什么好的解决办法，但如果 background 本身没有其它副作用的话，倒也能算是一个没有办法的办法。结果这样～～唉～～