zoukankan      html  css  js  c++  java
  • Webview窗口设置遮罩层

    在Webview窗口中如果存在子Webview的情况下,使用html中的css来做页面遮罩无法覆盖子Webview,为了解决此问题,WebviewStyle对象添加mask属性,用于设置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平台显示遮罩层后仍然可以操作侧滑返回。
  • 相关阅读:
    Vue之数据排序加签
    微信小程序之评分页面
    Vue之展示PDF格式的文档
    动态规划问题思考(DP)
    LitJson的使用
    c#事件管理器
    unity shader 学习
    unity ugui图片自适应文字内容大小
    unity3d各种OpenFileDialog操作
    ue4 使用3dsmax制作布料的插件及下载位置
  • 原文地址:https://www.cnblogs.com/WebApp-DotNet/p/6741888.html
Copyright © 2011-2022 走看看