DCloud_App_Array
DCloud_App_Array
  • 发布:2014-12-26 21:32
  • 更新:2021-10-07 01:34
  • 阅读:26527

Webview窗口设置遮罩层

分类:HTML5+

在Webview窗口中如果存在子Webview的情况下,使用html中的css来做页面遮罩无法覆盖子Webview,为了解决此问题,WebviewStyle对象添加mask属性,用于设置Webview窗口的遮罩层。
Webview窗口遮罩
mask属性值为字符串类型,可取值:

  • rgba字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)";
  • “none",表示不使用遮罩层。

Webview的遮罩层会覆盖Webview中所有内容(包括子Webview),并且截获Webview窗口的所有触屏事件。此时Webview窗口的点击操作会触发maskClick事件。
使用方法如下:

// 创建Webview窗口带遮罩层  
var wd=plus.webview.create('http://www.dcloud.io/','dcloud',{mask:'rgba(0,0,0,0.5)'});  
wd.show();  

// 动态修改Webview窗口的遮罩层  
var ws=plus.webview.currentWebview();  
ws.setStyle({mask:"rgba(0,0,0,0.5)"});  
// 用户点击Webview窗口后不显示遮罩层  
ws.addEventListener("maskClick",function(){  
    ws.setStyle({mask:"none"});  
},false);

注意:

  • 显示遮罩层后仍然不会影响JS的执行;
  • 在Android平台显示遮罩层后仍然可监听到backbutton事件;
  • 在iOS平台显示遮罩层后仍然可以操作侧滑返回。
4 关注 分享
你猜我猜不猜 xiao127 2***@qq.com 一抱一个胖猪猪

要回复文章请先登录注册

5***@qq.com

5***@qq.com

回复 你猜我猜不猜 :
我要做的需求和你一样样的,问下,你怎么实现的呢?是单独给子页面加遮罩?
2017-02-23 19:06
5***@qq.com

5***@qq.com

webview中的styles对象填写 border-radiu这种中间有个“-”的样式怎么填写
2016-10-26 16:10
木子水吉

木子水吉

用了你的代码后开始不停滴报这个错.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
Uncaught RangeError: Maximum call stack size exceeded.
2016-08-18 14:52
你猜我猜不猜

你猜我猜不猜

管用了,正好我做了一个主页面有个tab bar (4个子页面),然后用webview的侧滑,结果遮罩层只遮住了头部和底部,中间的子view没有,用上主页面的mask 好了
2016-07-08 14:40
nick01

nick01

回复 DCloud_App_Array :
请问这个可以完善吗?
2016-05-31 15:25
nick01

nick01

回复 DCloud_App_Array :
比如侧滑页面,子页面有滑动关闭事件,有遮罩时事件无法执行
2016-05-30 21:35
nick01

nick01

回复 DCloud_App_Array :
比如侧滑页面,子页面有滑动关闭事件,有遮罩时事件无法执行
2016-05-30 21:35
DCloud_App_Array

DCloud_App_Array (作者)

回复 nick01 :
具体是什么滑动事件
2016-05-30 20:39
nick01

nick01

安卓子窗口遮罩时无法执行滑动事件,要怎么做???
2016-05-30 09:45
___K

___K

这代码没用啊,咋整的。
2016-05-28 00:37