精华内容
下载资源
问答
  • 【技术可行性】哇~,考虑到本身技术和对方的平台,自身技术方面,前端没问题,后台也没问题,但是如果用后台,在没有网络,在对方不能安装数据库和运行环境的情况下,我打算采用前端实现这个便笺,一方面很容易...

    开发缘由【需求发现和分析】

    想要送朋友一个礼物,但是想了想,街上买的东西,em~,我们这样的猿确实不会选礼物啊,由此就想利用自己手中的工具和知识做点有用的东西吧,抱枕是礼物,钢笔是礼物,电子产品也是礼物啊~哈哈,由此,就为朋友定制设计一个便笺,尽量符合她的使用日常记录需求吧,虽然现在app stroe 里一搜一大把,一个比一个好,但是自己做一个符合个人特色的,应该会有不一样的感觉,哈哈!所以有的玩l了。

    需求1能添加文字记录
    需求2能删除文字记录
    需求3能修改文字记录
    需求4可以一键对完成事件划删除线
    需求5显示最后一次修改并保存的时间
    需求6个人特色(em~这个~)

     

    准备着手【可行性研究】

    1. 【经济可行性】em~软件真是好啊,不需要花钱去买啥材料,有了电脑和软件,加上知识,经济方面,通过了!
    2. 【技术可行性】哇~,考虑到本身技术和对方的平台,自身技术方面,前端没问题,后台也没问题,但是如果用后台,在没有网络,在对方不能安装数据库和运行环境的情况下,我打算采用纯前端实现这个便笺,一方面很容易打包安装到手机里面应用,另一方面直接在电脑的浏览器就可以应用!所有这个问题,用纯前端知识来处理,可以的!

    动手前先设计分析很有必要的【总体设计】

    不过这个小东西确实很小很容易维护和设计,那这个就在脑海里分析了,哈哈,大项目可不能这样,不然会死得很惨!

    开始动手【编码】

    • 页面编码:
     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8">
     5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6     <meta name="viewport" content="width=device-width,minimum-scale=1.0">
     7     <script src="../js/jquery-3.3.1.js"></script>
     8     <script src="../js/notes.js"></script>
     9     <link rel="stylesheet" type="text/css" href="../css/bcss/bootstrap.css" />
    10     <link rel="stylesheet" type="text/css" href="../css/fortest2.css" />
    11     <title>便签</title>
    12 </head>
    13 <body>
    14     <div class="container">
    15         <div class="myfomat">
    16             <textarea class="form-control mytextarer" name="filereader" placeholder="美好生活从有序开始~" style="width: 100%; height: 180px;"></textarea>
    17                <br />
    18                <div style="margin-left: 2%;width: 50%;float: left;height: 35px;">
    19                    <button class="btn btn-sm btn-info" type="button" name="storebutton">save</button>
    20                 <button class="btn btn-sm btn-danger" type="button" name="clearbutton">clear</button>
    21                </div>
    22                <div style="width: 35%;height: 30px;float: left;margin-right: 5%;">
    23                 <h4>有序便签</h4>
    24             </div>
    25               <br />
    26         </div>
    27     </div>
    28 </body>
    29 </html>
    View Code
    •  css文件编码(待)
    • js文件编码
     1     window.onload = function(){
     2         var text = document.getElementsByName('filereader')[0],
     3         storeButton = document.getElementsByName('storebutton')[0],
     4         clearButton = document.getElementsByName('clearbutton')[0];
     5        
     6        // 检测localStorage中是否已有缓存
     7         if(window.localStorage.getItem('textareaStorage')) {
     8 //              alert('检测到本地存储的文件,已为您自动恢复');
     9             text.value = window.localStorage.getItem('textareaStorage');
    10         }
    11         
    12 //              存储文件
    13         storeButton.onclick = function(){
    14             window.localStorage.setItem('textareaStorage', text.value);
    15             alert('保存成功');
    16         };
    17 
    18          // 清除存储
    19         clearButton.onclick = function(){
    20             window.localStorage.removeItem('textareaStorage');
    21             document.getElementsByName('filereader').value = "";
    22             alert('清除成功');
    23             window.location.reload();
    24         };
    25     };
    View Code
    • 当前效果

     当sava的时候会存储,当下次打开网页的时候数据会自动恢复,当clear的时候数据会清除,但是页面查一次刷新,所以清除后还会看到输入框里的条目,后面通过在清除事件里添加了一次重新加载,解决了这个问题,所以现在的清除可以及时消失。

     

    转载于:https://www.cnblogs.com/ynhwl/p/9527159.html

    展开全文
  • H5商城,前端静态页面

    千次阅读 2018-10-17 09:01:00
    手写H5商城,2年前给一个朋友做的,高仿必要商城。页面包含个人,商家,商品分类,详情,订单,登录注册,添加收货地址,提现等34个页面 详细 代码下载:http://www.demodashi.com/demo/14152.html ...

    概述

    纯手写H5商城,2年前给一个朋友做的,高仿必要商城。页面包含个人,商家,商品分类,详情,订单,登录注册,添加收货地址,提现等34个页面

    详细

    一、前言

    这是一个H5商城,以必要APP为原型,高仿的一套纯静态HTML页面。2年前给一个朋友做的,因为纯手写和部分引用jquery插件,js和css代码清晰简洁,仅这一套前端页面的价格是7000元,页面包含个人,商家,商品分类,详情,订单,登录注册,添加收货地址,提现等34个页面,后来已经改版,目前只是把第一版拿出来分享

    做后端的小伙伴总是在抱怨前端较弱,接口写的再好,没有一个漂亮的前端,怎么能更好的展示自己的作品呢,想要去研究前端,从网上下载的前端模板代码复杂,想要修改个动态效果更是捉襟见肘,我也有经历过这种痛苦,苦于没有前端经验,又没有可以合伙一起做项目的前端,很多时候,都是自己在说服自己放弃一些提升自己的机会,现在好了,我分享的这套模板,基本上可以满足大家H5商城前端的需求,而且代码简介清晰,为自己动态绑定数据提供了很大的便利性

    首先几张来张效果图:

    产品详情.png购物车.png订单页面.png个人中心.png

    本案例主要用到了的js如下图

    js.png

    二、代码分析

    下面抛出部分页面代码,全部样式使用外链的形式,页面简介,容易理解

    购物车页面:使用原生js触发添加,删除等操作,icon使用字体形式,减少页面的占用体积

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <link href="css/sweetalert.css" rel="stylesheet">
    <link href="css/application.css" rel="stylesheet">
    <title>购物车</title>
    </head>
    <body>
    <header>
    <div>
    <h1>购物车</h1>
    <a href="index.html">
    <span></span>
    </a>
    </div>
    </header>
    
    <div>
    <div class="medialist-header clearfix">
    <div class="icheck pull-left"><input type="checkbox" name="checkall" class="iradio checkall" id="checkall"></div>&nbsp;&nbsp;<label for="checkall">全选</label>
    <a οnclick="emptycart()">清空</a>
    </div>
    <div>
             <div><input type="checkbox" name="iCheck"></div>
             <a class="productimg thumbnail"><img src="http://www.placehold.it/128x128/EFEFEF/AAAAAA" width="128" ></a>
              <div>
    <h4><span>产品名称名称产品</span></h4>
    <div>
    <input type="number" value="0"/>
    </div>
    <p><span data-value="200">¥200</span></p>
              </div>
    <div>
    <a><i></i></a>
    </div>
        </div>
    <div>
             <div><input type="checkbox" name="iCheck"></div>
             <a class="productimg thumbnail"><img src="http://www.placehold.it/128x128/EFEFEF/AAAAAA" width="128" ></a>
              <div>
    <h4><span>产品名称名称产品</span></h4>
    <div>
    <input type="number" value="0"/>
    </div>
    <p><span data-value="200">¥200</span></p>
              </div>
    <div>
    <a><i></i></a>
    </div>
        </div>
      </div>
    
    
    <footer>
    <div></div>
    <div class="row footbar">
    <div class="col-12 billing">
    <div class="icheck pull-left"><input type="checkbox" name="checkall" class="iradio checkall" id="checkall2"></div>&nbsp;&nbsp;<label for="checkall2">全选</label>&nbsp;&nbsp;
    <label>合计:<span class="prices total"> </span></label>
    <a class="pull-right btn" href="order.html">结算</a>
    </div>
    <a class="col-4 text-center" href="index.html" ><span></span>首页</a>
    <a class="col-4 text-center active" href="cart.html" ><span></span>购物车</a>
    <a class="col-4 text-center" href="profile.html" ><span></span>我的必要</a>
    </div>
    </footer>
    
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/swipeSlide.min.js" type="text/javascript"></script>
    <script src="js/sweetalert.min.js" type="text/javascript"></script>
    <script src="js/jquery.mmenu.min.js" type="text/javascript"></script>
    <script src="js/icheck.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
    <script src="js/application.js" type="text/javascript"></script>
    <script>
    var price = function(){
    var sp = 0;
    $(".media").each(function(){
    var obj = $(this);
    var state = obj.find(":checkbox")[0].checked;
    if(state)
    {
    sp = sp + parseInt(obj.find(".spinners").val())*parseInt(obj.find(".prices").attr("data-value"))
    }
    })
    $(".total").html("¥"+sp)
    }
    
    //空的购物车
    var emptycart = function(){
    $(".billing").remove();
    $(".medialist").html("<section><div class='text-center purple' style='font-size:5rem'><span></span></div><p >购物车为空</p></section>")
    }
    
    $(function(){
    $('input:checkbox').iCheck({
    checkboxClass: 'iradio_square-purple',
        increaseArea: '50%' // optional
      });
    
    $('.spinners').spinner({max:5});
    
    //全选
    $("#checkall2,#checkall").on('ifChanged',function(event){
    $(":checkbox").iCheck(event.target.checked?"check":"uncheck");
    });
    
    //计价触发
    $(":checkbox").on('ifToggled',function(event){
    price();
    });
    $("button.increase,button.decrease").on("click",function(){
    price();
    })
    
    $(".btn-del").on('click',function(){
    if($(".media").length==1)
    {
    emptycart();
    }else{
    $(this).closest(".media").remove();
    price();
    }
    
    //购物车移除操作
    //  //  //  //
    })
    
    
    })
    
    </script>
    </body>
    </html>
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <link href="css/sweetalert.css" rel="stylesheet">
    <link href="css/application.css" rel="stylesheet">
    <title>个人中心</title>
    </head>
    <body>
    <header>
    <div>
    <h1>个人中心</h1>
    <a href="profile-business.html">
    <!--<span class="icon-more_m pull-left"></span> &nbsp;-->商家模式
    </a>
    </div>
    </header>
    <section>
    <div>
    <img src="http://fakeimg.pl/120x120/ccc/fff/?text=LOGO">
    </div>
    <p>我的用户名</p>
    <div class="row rmenu-3">
    <div ><a href="my-order-pay.html"><span></span>待付款</a></div>
    <div ><a href="my-order-delivery.html"><span></span>待收货</a></div>
    <div ><a href="my-order-empty.html"><span></span>退款/售后</a></div>
    </div>
    </section>
    
    <section class="wrapper cart">
    <div>
    <p> &nbsp;</p>
    <div>
    <a href="my-order.html"><i ></i>我的订单</a>
    </div>
    <div>
    <a href="address.html"><i ></i>我的地址
    </a>
    </div>
    <p> &nbsp;</p>
    <div>
    <a href="customerservice.html"><i ></i>客服中心
    </a>
    </div>
    <div>
    <a href="password.html"><i ></i>修改密码
    </a>
    </div>
    </div>
    </section>
    
    <footer>
    <div></div>
    <div class="row footbar">
    <a class="col-4 text-center" href="index.html" ><span></span>首页</a>
    <a class="col-4 text-center" href="cart.html" ><span></span>购物车</a>
    <a class="col-4 text-center active" href="profile.html" ><span></span>我的必要</a>
    </div>
    </footer>
    
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/swipeSlide.min.js" type="text/javascript"></script>
    <script src="js/sweetalert.min.js" type="text/javascript"></script>
    <script src="js/jquery.mmenu.min.js" type="text/javascript"></script>
    <script src="js/icheck.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
    <script src="js/application.js" type="text/javascript"></script>
    </body>
    </html>

    小结

    HTML看似简单,但是想要写出一套代码漂亮的前端,还是需要有一定功底的

    三、文件截图以及运行操作

    1、文件截图

    image.png

    2、运行操作:

    双击index.html即可看到效果。

    四、浏览器兼容性

    目前兼容 微信浏览器,Chrome,firefox,360浏览器等主流浏览器

    五、其他补充

    此程序是静态页面,页面上的数据都是写死的,仅用作前端展示使用,动态数据需要自己单独对接

    注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

     

    转载于:https://www.cnblogs.com/demodashi/p/9801975.html

    展开全文
  • h5

    2018-12-13 16:57:43
    : 替换H5标准API配置信息 WebviewStatusbarStyles : JSON对象,Webview窗口的系统状态栏区域样式 WebviewStyles : JSON对象,Webview窗口对象的样式 WebviewTransform : 一组用于定义页面或控件变形的属性 ...
    
    

    Native.js

     

    webview常见问题我要提意见

    Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。

    方法:

    对象:

    回调方法:

    权限:

    5+功能模块(permissions)

    
    {
    // ...
    "permissions":{
    	// ...
    	"Webview": {
    		"description": "窗口管理"
    	}
    }
    }
    			

    all

    获取所有Webview窗口

    
    Array[WebviewObject] plus.webview.all();
    				

    说明:

    获取应用中已创建的所有Webview窗口,包括所有未显示的Webview窗口。 返回WebviewObject对象在数组中按创建的先后顺序排列,即数组中第一个WebviewObject对象用是加载应用的入口页面。

    参数:

    返回值:

    Array[ WebviewObject ] : 应用中创建的所有Webview窗口对象数组。

    示例:

    
    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	// 获取所有Webview窗口
    	var wvs=plus.webview.all();
    	for(var i=0;i<wvs.length;i++){
    		console.log('webview'+i+': '+wvs[i].getURL());
    	}
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    	获取所有Webview窗口
    	</body>
    </html>
    				

    close

    关闭Webview窗口

    
    void plus.webview.close( id_wvobj, aniClose, duration, extras );
    				

    说明:

    关闭已经打开的Webview窗口,需先获取窗口对象或窗口id,并可指定关闭窗口的动画及动画持续时间。

    参数:

    • id_wvobj: ( String | WebviewObject ) 必选 要关闭Webview窗口id或窗口对象
      若操作窗口对象已经关闭,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。
    • aniClose: AnimationTypeClose ) 可选 关闭Webview窗口的动画效果
      如果没有指定关闭窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。
    • duration: ( Number ) 可选 关闭Webview窗口动画的持续时间
      单位为ms,如果没有设置则使用显示窗口动画时间。
    • extras: WebviewExtraOptions ) 可选 关闭Webview窗口扩展参数
      可用于指定Webview窗口动画是否使用图片加速。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 关闭自身窗口
    function closeme(){
    	var ws=plus.webview.currentWebview();
    	plus.webview.close(ws);
    }
    	</script>
    	</head>
    	<body>
    		关闭Webview窗口<br/>
    		<button onclick="closeme()">close</button>
    	</body>
    </html>
    				

    create

    创建新的Webview窗口

    
    WebviewObject plus.webview.create( url, id, styles, extras );
    				

    说明:

    创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。

    参数:

    • url: ( String ) 可选 新窗口加载的HTML页面地址
      新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址。
    • id: ( String ) 可选 新窗口的标识
      窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
    • styles: WebviewStyles ) 可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
    • extras: ( JSON ) 可选 创建Webview窗口的额外扩展参数
      值为JSON类型,设置扩展参数后可以直接通过Webview的点(“.”)操作符获取扩展参数属性值,如: var w=plus.webview.create('url.html','id',{},{preload:'preload webview'}); // 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview”

    返回值:

    WebviewObject : Webview窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 创建并显示新窗口
    function create(){
    	var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
    	w.show(); // 显示窗口
    }
    	</script>
    	</head>
    	<body>
    		创建新的Webview窗口<br/>
    		<button onclick="create()">Create</button>
    	</body>
    </html>
    				

    currentWebview

    获取当前窗口的WebviewObject对象

    
    WebviewObject plus.webview.currentWebview();
    				

    说明:

    获取当前页面所属的Webview窗口对象。

    参数:

    返回值:

    WebviewObject : Webview窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	var ws=plus.webview.currentWebview();
    	console.log( "当前Webview窗口:"+ws.getURL() );
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		获取自身Webview窗口
    	</body>
    </html>
    				

    getDisplayWebview

    获取屏幕所有可视的Webview窗口

    
    Array[WebviewObject] plus.webview.getDisplayWebview();
    				

    说明:

    仅在屏幕区域显示的Webview窗口,如果Webview窗口显示了但被其它Webview窗口盖住则认为不可视。

    参数:

    返回值:

    Array[ WebviewObject ] : 屏幕中可视的Webview窗口对象数组。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	// 获取所有可视的Webview窗口
    	var wvs=plus.webview.getDisplayWebview();
    	for(var i=0;i<wvs.length;i++){
    		console.log('Display webview '+i+': '+wvs[i].getURL());
    	}
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    	获取屏幕所有可视的Webview窗口
    	</body>
    </html>
    				

    getWebviewById

    查找指定标识的WebviewObject窗口

    
    WebviewObject plus.webview.getWebviewById( id );
    				

    说明:

    在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null,若存在多个相同标识的Webview窗口,则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口,其标识为应用的%APPID%,可通过plus.runtime.appid获取。

    参数:

    • id: ( String ) 必选 要查找的Webview窗口标识

    返回值:

    WebviewObject : WebviewObject窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	// 查找应用首页窗口对象
    	var h=plus.webview.getWebviewById( plus.runtime.appid );
    	console.log( "应用首页Webview窗口:"+h.getURL() );
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		查找指定标识的窗口
    	</body>
    </html>
    				

    getLaunchWebview

    获取应用首页WebviewObject窗口对象

    
    WebviewObject plus.webview.getLaunchWebview();
    				

    参数:

    返回值:

    WebviewObject : WebviewObject窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	// 获取应用首页窗口对象
    	var h=plus.webview.getLaunchWebview();
    	console.log('应用首页Webview窗口:'+h.getURL());
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		获取应用首页WebviewObject窗口对象
    	</body>
    </html>
    				

    getSecondWebview

    获取应用第二个首页WebviewObject窗口对象

    
    WebviewObject plus.webview.getSecondWebview();
    				

    说明:

    在双首页模式下(在manifest.json的plus->secondwebview节点下配置),应用会自动创建两个首页Webview,通过getLaunchWebview()可获取第一个首页窗口对象,通过getSecondWebview()可获取第二个首页窗口对象。

    参数:

    返回值:

    WebviewObject : WebviewObject窗口对象,在非双首页模式下则返回undefined。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	// 获取应用第二个首页窗口对象
    	var h=plus.webview.getSecondWebview();
    	if(h){
    		console.log('应用第二个首页Webview窗口:'+h.getURL());
    	}else{
    		console.log('应用不存在第二个首页Webview窗口');
    	}
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		获取应用第二个首页WebviewObject窗口对象
    	</body>
    </html>
    				

    getTopWebview

    获取应用显示栈顶的WebviewObject窗口对象

    
    WebviewObject plus.webview.getTopWebview();
    				

    参数:

    返回值:

    WebviewObject : WebviewObject窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	// 获取应用首页窗口对象
    	var h=plus.webview.getTopWebview();
    	console.log('应用显示栈顶的Webview窗口:'+h.getURL());
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		获取应用显示栈顶的WebviewObject窗口对象
    	</body>
    </html>
    				

    hide

    隐藏Webview窗口

    
    void plus.webview.hide( id_wvobj, aniHide, duration, extras );
    				

    说明:

    根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。

    参数:

    • id_wvobj: ( String | WebviewObject ) 必选 要隐藏的Webview窗口id或窗口对象
      使用窗口对象时,若窗口对象已经隐藏,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的,若没有查找到对应id的WebviewObject对象,则无任何效果。
    • aniHide: AnimationTypeClose ) 可选 隐藏Webview窗口的动画效果
      如果没有指定窗口动画,则使用默认动画效果“none”。
    • duration: ( Number ) 可选 隐藏Webview窗口动画的持续时间
      单位为ms,如果没有设置则使用默认窗口动画时间。
    • extras: WebviewExtraOptions ) 可选 隐藏Webview窗口扩展参数
      可用于指定Webview窗口动画是否使用图片加速。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 隐藏自身窗口
    function hideeme(){
    	plus.webview.hide(plus.webview.currentWebview());
    }
    	</script>
    	</head>
    	<body>
    		隐藏Webview窗口<br/>
    		<button onclick="hideeme()">Hide</button>
    	</body>
    </html>
    				

    open

    创建并打开Webview窗口

    
    WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
    				

    说明:

    创建并显示Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后自动将Webview窗口显示出来。

    参数:

    • url: ( String ) 可选 打开窗口加载的HTML页面地址
      新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址。
    • id: ( String ) 可选 打开窗口的标识
      窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
    • styles: WebviewStyles ) 可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
    • aniShow: AnimationTypeShow ) 可选 显示Webview窗口的动画效果
      如果没有指定窗口动画,则使用默认无动画效果“none”。
    • duration: ( Number ) 可选 显示Webview窗口动画的持续时间
      单位为ms,默认值为200ms(毫秒)。
    • showedCB: SuccessCallback ) 可选 Webview窗口显示完成的回调函数
      当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。

    返回值:

    WebviewObject : WebviewObject窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 创建并显示新窗口
    function openWebview(){
    	var w = plus.webview.open('http://m.weibo.cn/u/3196963860');
    }
    	</script>
    	</head>
    	<body>
    		打开Webview窗口<br/>
    		<button onclick="openWebview()">Open</button>
    	</body>
    </html>
    				

    prefetchURL

    预载网络页面

    
    void plus.webview.prefetchURL(url);
    				

    说明:

    预载网络页面会向服务器发起http/https请求获取html页面内容, 待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。 注意:预载网络页面仅在运行期生效,为了节省内存仅保留最后5个预载页面数据。

    参数:

    • url: ( String ) 必选 需要预载的页面地址
      必须是网络地址(http/https),本地页面地址无需预载。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var url = 'http://m.weibo.cn/u/3196963860';
    var ws=null,wn=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 预载网络页面
    	plus.webview.prefetchURL(url);
    
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 打开窗口
    function showWebview(){
    	// 预创建新窗口(显示在可视区域外)
    	wn=plus.webview.create(url, 'test',{render:'always'});
    	wn.show('none');
    }
    	</script>
    	</head>
    	<body>
    		<br/><br/>
    		<button onclick="showWebview()">显示预载页面</button>
    	</body>
    </html>
    				

    prefetchURLs

    预载网络页面(多个地址)

    
    void plus.webview.prefetchURLs(urls);
    				

    说明:

    预载网络页面会向服务器发起http/https请求获取html页面内容, 待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。 注意:预载网络页面仅在运行期生效,为了节省内存仅保留最后5个预载页面数据。

    参数:

    • urls: ( Array[ String ] ) 必选 需要预载的页面地址数组
      数组项必须是网络地址(http/https),本地页面地址无需预载。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var urls = ['http://m.weibo.cn/u/3196963860',
    	'http://m3w.cn/'];
    var ws=null,wn=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 预载网络页面
    	plus.webview.prefetchURLs(urls);
    
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 打开窗口
    function showWebview(){
    	// 创建并显示新窗口
    	wn=plus.webview.create(urls[0], 'test', {render:'always'});
    	wn.show('none');
    }
    function showWebview1(){
    	// 创建并显示新窗口
    	wn=plus.webview.create(urls[1], 'test1', {render:'always'});
    	wn.show('none');
    }
    	</script>
    	</head>
    	<body>
    		<br/><br/>
    		<button onclick="showWebview()">显示预载页面</button><br/>
    		<button onclick="showWebview1()">显示预载页面1</button>
    	</body>
    </html>
    				

    show

    显示Webview窗口

    
    void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
    				

    说明:

    显示已创建或隐藏的Webview窗口,需先获取窗口对象或窗口id,并可指定显示窗口的动画及动画持续时间。

    参数:

    • id_wvobj: ( String | WebviewObject ) 必选 要显示Webview窗口id或窗口对象
      若操作Webview窗口对象显示,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先创建的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。
    • aniShow: AnimationTypeShow ) 可选 显示Webview窗口的动画效果
      如果没有指定窗口动画类型,则使用默认值“auto”,即自动选择上一次显示窗口的动画效果,如果之前没有显示过,则使用“none”动画效果。
    • duration: ( Number ) 可选 显示Webview窗口动画的持续时间
      单位为ms,如果没有设置则使用默认窗口动画时间600ms。
    • showedCB: SuccessCallback ) 可选 Webview窗口显示完成的回调函数
      当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。
    • extras: WebviewExtraOptions ) 可选 显示Webview窗口扩展参数
      可用于指定Webview窗口动画是否使用图片加速。

    返回值:

    WebviewObject : Webview窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 创建并显示新窗口
    function create(){
    	var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
    	plus.webview.show(w); // 显示窗口
    }
    	</script>
    	</head>
    	<body>
    		显示Webview窗口<br/>
    		<button onclick="create()">Create</button>
    	</body>
    </html>
    				

    startAnimation

    Webview窗口组合动画

    
    void plus.webview.startAnimation(options, otherOptions, callback);
    				

    说明:

    同步组合两个Webview窗口动画,动画完成后窗口的位置会发生变化,一次需要在动画属性参数中设置动画起始位置、结束位置等。 注意:此动画操作会改变窗口位置(如left值等),再次调用show方法时需要确保其位置是否在可视区域,如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内,如setStyle({left:'0px'});。

    参数:

    • options: WebviewAnimationOptions ) 必选 主窗口动画属性
      设置动画的主窗口及其起始位置,结束位置等信息。
    • otherOptions: WebviewAnimationOptions ) 可选 关联窗口动画属性
      设置关联的窗口及其起始位置,结束位置等信息。
    • callback: WebviewAnimationCallback ) 可选 Webview窗口组合动画完成回调
      每个窗口动画完成时触发一次回调,可通过回调参数的id属性获取窗口的标识。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,wn=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 预创建新窗口(显示在可视区域外)
    	wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag',{left:'100%',render:'always'});
    	wn.show('none');
    	// 右滑隐藏新窗口
    	wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
    		console.log('Right drag event: '+JSON.stringify(e));
    	});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 窗口组合动画
    function webviewAnimation(){
    	plus.webview.startAnimation({view:ws,styles:{fromLeft:'0%',toLeft:'-100%'},action:'none'},
    	{view:wn,styles:{fromLeft:'100%',toLeft:'0%'},action:'none'},
    	function(e){
    		console.log('Animation finished: '+JSON.stringify(e));
    	});
    }
    	</script>
    	</head>
    	<body>
    		<br/><br/>
    		<button onclick="webviewAnimation()">窗口组合动画显示新窗口</button>
    		<br/><br/>
    		在新窗口中可以右滑返回(新窗口移动到屏幕外)
    	</body>
    </html>
    				

    defaultHardwareAccelerated

    获取Webview默认是否开启硬件加速

    
    Boolean plus.webview.defaultHardwareAccelerated();
    				

    说明:

    由于不同设备对硬件加速的支持情况存在差异,开启硬件加速能加速HTML页面的渲染,但也会消耗更多的系统资源,从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题, 因此5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速。 关闭硬件加速则可能会导致Webview页面无法支持Video标签播放视频等问题,如果在特定情况下需要调整修改默认开启硬件加速的行为,则可通过plus.webview.defaultHardwareAccelerated()方法获取当前设备默认是否开启硬件加速状态,从而决定是否需要显式开启或关闭指定Webview的硬件加速功能(通过WebviewStyles的hardwareAccelerated属性设置)。

    参数:

    返回值:

    Boolean : Webview窗口默认开启硬件加速则返回true,否则返回false。

    平台支持:

    • Android - 2.3+ (支持): 返回当前设备默认是否开启硬件加速。
    • iOS - 5.1+ (不支持): 返回固定值true。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 创建新窗口并设置开启硬件加速
    function create(){
    	var styles={};
    	// 在Android5以上设备,如果默认没有开启硬件加速,则强制设置开启
    	if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)>=5){
    		styles.hardwareAccelerated=true;
    	}
    	var w = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles);
    	plus.webview.show(w); // 显示窗口
    }
    	</script>
    	</head>
    	<body>
    		开启硬件加速显示Webview窗口<br/>
    		<button onclick="create()">Create</button>
    	</body>
    </html>
    				

    AnimationTypeShow

    一组用于定义页面或控件显示动画效果

    常量:

    • "auto": (String 类型 )自动选择动画效果

      自动选择动画效果,使用上次显示窗口设置的动画效果,如果是第一次显示则默认动画效果“none”。

    • "none": (String 类型 )无动画效果

      立即显示页面,无任何动画效果,页面显示默认的动画效果。 此效果忽略动画时间参数,立即显示。 对应关闭动画"none"。

    • "slide-in-right": (String 类型 )从右侧横向滑动效果

      页面从屏幕右侧外向内横向滑动显示。 对应关闭动画"slide-out-right"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-in-left": (String 类型 )从左侧横向滑动效果

      页面从屏幕左侧向右横向滑动显示。 对应关闭动画"slide-out-left"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-in-top": (String 类型 )从上侧竖向滑动效果

      页面从屏幕上侧向下竖向滑动显示。 对应关闭动画"slide-out-top"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-in-bottom": (String 类型 )从下侧竖向滑动效果

      页面从屏幕下侧向上竖向滑动显示。 对应关闭动画"slide-out-bottom"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "fade-in": (String 类型 )从透明到不透明逐渐显示效果

      页面从完全透明到不透明逐渐显示。 对应关闭动画"fade-out"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "zoom-out": (String 类型 )从小到大逐渐放大显示效果

      页面在屏幕中间从小到大逐渐放大显示。 对应关闭动画"zoom-in"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为100ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "zoom-fade-out": (String 类型 )从小到大逐渐放大并且从透明到不透明逐渐显示效果

      页面在屏幕中间从小到大逐渐放大并且从透明到不透明逐渐显示。 对应关闭动画"zoom-fade-in"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为100ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "pop-in": (String 类型 )从右侧平移入栈动画效果

      页面从屏幕右侧滑入显示,同时上一个页面带阴影效果从屏幕左侧滑出隐藏。 对应关闭动画"pop-out"。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。 此动画是新开窗口侧滑挤压当前屏幕窗口特效,必须是两个Webview窗口的组合动画, 如果当前屏幕已显示多个Webview窗口,则显示新窗口不支持此动画类型,自动转成“slide-in-right”。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。

    AnimationTypeClose

    一组用于定义页面或控件关闭的动画效果

    常量:

    • "auto": (String 类型 )自动选择动画效果

      自动选择显示窗口相对于的动画效果。

    • "none": (String 类型 )无动画

      立即关闭页面,无任何动画效果。 此效果忽略动画时间参数,立即关闭。

    • "slide-out-right": (String 类型 )横向向右侧滑出屏幕动画

      页面从屏幕中横向向右侧滑动到屏幕外关闭。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-out-left": (String 类型 )横向向左侧滑出屏幕动画

      页面从屏幕中横向向左侧滑动到屏幕外关闭。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-out-top": (String 类型 )竖向向上侧滑出屏幕动画

      页面从屏幕中竖向向上侧滑动到屏幕外关闭。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-out-bottom": (String 类型 )竖向向下侧滑出屏幕动画

      页面从屏幕中竖向向下侧滑动到屏幕外关闭。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "fade-out": (String 类型 )从不透明到透明逐渐隐藏动画

      页面从不透明到透明逐渐隐藏关闭。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "zoom-in": (String 类型 )从大逐渐缩小关闭动画

      页面逐渐向页面中心缩小关闭。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为100ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "zoom-fade-in": (String 类型 )从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画

      页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为100ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "pop-out": (String 类型 )从右侧平移出栈动画效果

      页面从屏幕右侧滑出消失,同时上一个页面带阴影效果从屏幕左侧滑入显示。

      平台支持

      • Android - 2.2+ (支持): 默认动画时间为200ms。
      • iOS - 5.1.1+ (支持): 默认动画时间为300ms。

    WebviewObject

    Webview窗口对象,用于操作加载HTML页面的窗口

    属性:

    • id: Webview窗口的标识

    方法:

    事件:

    • onclose: Webview窗口关闭事件
    • onerror: Webview窗口错误事件
    • onloaded: Webview窗口页面加载完成事件
    • onloading: Webview窗口页面开始加载事件

    id

    Webview窗口的标识

    说明:

    String 类型

    在打开或创建Webview窗口时设置,如果没有设置窗口标识,此属性值为undefined。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	// 获取自身webview窗口
    	var ws=plus.webview.currentWebview();
    	console.log('窗口标识: '+ws.id);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口的标识<br/>
    	</body>
    </html>
    						

    addEventListener

    添加事件监听器

    
    wobj.addEventListener( event, listener, capture );
    						

    说明:

    向Webview窗口添加事件监听器,当指定的事件发生时,将触发listener函数的执行。 可多次调用此方法向Webview添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。

    参数:

    • event: WebviewEvent ) 必选 Webview窗口事件类型
    • listener: EventCallback ) 必选 监听事件发生时执行的回调函数
    • capture: ( Boolean ) 可选 捕获事件流顺序,暂无效果

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    var nw=null;
    // 监听Webview窗口事件
    function eventTest() {
    	if(nw){return;}
    	var w=plus.nativeUI.showWaiting()
    	// 打开新窗口
    	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	nw.addEventListener('loaded', function(){
    		console.log('New Window loaded!');
    		nw.show(); // 显示窗口
    		w.close();
    		w=null;
    	}, false);
    }
    	</script>
    	</head>
    	<body>
    		添加事件监听器<br/>
    		<button onclick="eventTest()">Event Listener</button>
    	</body>
    </html>
    						

    append

    在Webview窗口中添加子窗口

    
    void wobj.append( webview );
    						

    说明:

    将另一个Webview窗口作为子窗口添加到当前Webview窗口中,添加后其所有权归父Webview窗口,当父窗口关闭时子窗口自动关闭。

    参数:

    • webview: plus.nativeObj.View | WebviewObject ) 必选 被添加的子Webview窗口或View控件对象
      被添加的Webview窗口需通过plus.webview.create方法创建,并且不能调用其show方法进行显示。 父窗口显示时子窗口会自动显示,父窗口隐藏时子窗口也会自动隐藏。 被添加的View控件需通过new plus.nativeObj.View()创建,添加到Webview窗口后所有权一起转移(即Webview关闭后View控件也自动关闭)。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var embed=null;
    // H5 plus事件处理
    function plusReady(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'46px',bottom:'0px'});
    	plus.webview.currentWebview().append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		在Webview窗口中添加子窗口
    		<button onclick="plus.webview.currentWebview().close();">Back</button>
    	</body>
    </html>
    						

    appendJsFile

    添加Webview窗口预加载js文件

    
    void wobj.appendJsFile( file );
    						

    说明:

    对于一些网络HTML页面,在无法修改HTML页面时可通过此方法自动加载本地js文件。 当Webview窗口跳转到新页面时也会自动加载指定的js执行,添加多个js文件将按照添加的先后顺序执行。

    参数:

    • file: ( String ) 必选 窗口预加载的js文件地址
      js文件路径只支持本地文件,应该使用扩展相对路径类型的文件,如"_www/preload.js"。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	var nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	nw.appendJsFile('_www/preload.js');
    	nw.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		添加Webview窗口预加载js文件
    	</body>
    </html>
    						

    animate

    Webview窗口内容动画

    
    void wobj.animate(options, callback);
    						

    说明:

    动画后可能会导致Webview窗口显示内容改变,可通过调用restore方法恢复。 当Webview窗口内容动画引起内容不可见(透明),将显示此窗口后面的内容。

    参数:

    • options: WebviewContentAnimationOptions ) 可选 Webview窗口内容动画参数
    • callback: SuccessCallback ) 可选 Webview窗口内容动画结束回调函数
      Webview窗口内容动画效果结束时触发。 注意:动画结束时仍然会显示Webview窗口,需要调用其hide/close方法隐藏/关闭。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<title>Webview Example</title>
    		<script type="text/javascript">
    var wv=null;
    // H5 plus事件处理
    function plusReady(){
    	wv = plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // Webview窗口动画 
    function animateWebview(){
    	wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){
    		wv.restore();	// 内容动画结束后可调用此动画恢复显示内容
    	});
    }
    		</script>
    	</head>
    	<body>
    		Webview窗口内容动画<br/>
    		<button onclick="animateWebview()">内容动画</button><br/>
    	</body>
    </html>
    					

    back

    后退到上次加载的页面

    
    void wobj.back();
    						

    说明:

    Webview窗口历史记录操作,后退到窗口上次加载的HTML页面。 如果窗口历史记录中没有可后退的页面则不触发任何操作。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var embed=null;
    // H5 plus事件处理
    function plusReady(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	plus.webview.currentWebview().append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 返回上次页面
    function goBack() {
    	embed.back();
    }
    // 前进到上次页面
    function goForward() {
    	embed.forward();
    }
    	</script>
    	</head>
    	<body>
    		后退到上次加载的页面
    		<button onclick="goBack()">Back</button>
    		<button onclick="goForward()">Forward</button>
    	</body>
    </html>
    						

    beginPullToRefresh

    开始Webview窗口的下拉刷新

    
    void wobj.beginPullToRefresh();
    						

    说明:

    开始触发下拉刷新效果,与用户操作下拉刷新行为一致(有动画效果)。 触发setPullTorefresh方法设置的下拉刷新事件回调。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<meta name="HandheldFriendly" content="true"/>
    		<meta name="MobileOptimized" content="320"/>
    		<title>Webview Example</title>
    		<script type="text/javascript" charset="utf-8">
    var ws=null;
    var list=null;
    // 扩展API加载完毕,现在可以正常调用扩展API 
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setPullToRefresh({support:true,style:'circle',offset:'45px'}, onRefresh);
    	// 第一次打开页面即开始刷新列表
    	setTimeout(function(){
    		console.log('Initializ refresh');
    		ws.beginPullToRefresh();
    	},200);
    }
    // 判断扩展API是否准备,否则监听'plusready'事件
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // DOM构建完成获取列表元素
    document.addEventListener('DOMContentLoaded', function(){
    	list=document.getElementById('list');
    })
    // 刷新页面
    function onRefresh(){
    	setTimeout(function(){
    		if(list){
    			var item=document.createElement('li');
    			item.innerHTML='<span>New Item '+(new Date())+'</span>';
    			list.insertBefore(item,list.firstChild);
    		}
    		ws.endPullToRefresh();
    	},1000);
    }
    		</script>
    		<style type="text/css">
    li {
    	padding: 1em;
    	border-bottom: 1px solid #eaeaea;
    }
    li:active {
    	background: #f4f4f4;
    }
    		</style>
    	</head>
    	<body>
    		<ul id="list" style="list-style:none;margin:0;padding:0;">
    			<li><span>Initializ List Item 1</span></li>
    			<li><span>Initializ List Item 2</span></li>
    			<li><span>Initializ List Item 3</span></li>
    			<li><span>Initializ List Item 4</span></li>
    			<li><span>Initializ List Item 5</span></li>
    			<li><span>Initializ List Item 6</span></li>
    			<li><span>Initializ List Item 7</span></li>
    			<li><span>Initializ List Item 8</span></li>
    			<li><span>Initializ List Item 9</span></li>
    			<li><span>Initializ List Item 10</span></li>
    		</ul>
    	</body>
    </html>
    						

    canBack

    查询Webview窗口是否可后退

    
    void wobj.canBack( queryCallback );
    						

    说明:

    Webview窗口历史记录查询操作,获取Webview是否可后退到历史加载的页面,结果通过queryCallback回调方法返回。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var embed=null;
    // H5 plus事件处理
    function plusReady(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	plus.webview.currentWebview().append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 是否可后退
    function canBack() {
    	embed.canBack( function(e){
    		console.log('是否可返回:'+e.canBack);
    	});
    }
    	</script>
    	</head>
    	<body>
    		查询Webview窗口是否可后退
    		<button onclick="canBack()">canBack</button>
    	</body>
    </html>
    						

    canForward

    查询Webview窗口是否可前进

    
    void wobj.canForward( queryCallback );
    						

    说明:

    Webview窗口历史记录查询操作,获取Webview是否可前进到历史加载的页面,结果通过queryCallback回调方法返回。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var embed=null;
    // H5 plus事件处理
    function plusReady(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	plus.webview.currentWebview().append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 是否可前进
    function canForward() {
    	embed.canForward( function(e){
    		console.log( "是否可前进:"+e.canForward );
    	});
    }
    	</script>
    	</head>
    	<body>
    		查询Webview窗口是否可前进
    		<button onclick="canForward()">canForward</button>
    	</body>
    </html>
    						

    checkRenderedContent

    检测Webview窗口是否渲染完成

    
    void wobj.checkRenderedContent(options, successCallback, errorCallback);
    						

    说明:

    检测方式为判断的Webview窗口内容是否为白屏,如果非白屏则认为渲染完成,否则认为渲染未完成。 通过successCallback回调函数返回结果,如果检测过程中发生错误则触发errorCallback回调函数。

    参数:

    • options: WebviewRenderedEventOptions ) 可选 Webview窗口rendered事件参数
    • successCallback: ( Function ) 必选 检测Webview窗口渲染结果回调函数
      获取渲染检测结果后触发,函数原型为void function(e){}; e.rendered:表示检测渲染完成结果,Boolean类型,true表示渲染完成,false表示渲染未完成。
    • errorCallback: ErrorCallback ) 可选 检测Webview窗口渲染结果失败回调函数
      检测Webview窗口渲染结果过程中发生错误则触发errorCallback回调函数。

    返回值:

    void : 无

    平台支持:

    • Android - 2.2+ (支持)
    • iOS - ALL (不支持)

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var nw=null;
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 创建Webview窗口
    function createWebview(){
    	// 打开新窗口
    	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	nw.show();
    }
    function checkWebview(){
    	nw.checkRenderedContent({}, function(e){
    		console.log('checkRenderedContent success: '+JSON.stringify(e));
    	}, function(e){
    		console.log('checkRenderedContent error: '+JSON.stringify(e));
    	});
    }
    	</script>
    	</head>
    	<body>
    		检测Webview窗口是否渲染完成<br/>
    		<button onclick="createWebview()">Show</button><br/>
    		<button onclick="checkWebview()">Check</button>
    	</body>
    </html>
    						

    children

    获取Webview窗口的所有子Webview窗口

    
    Array[WebviewObject] wobj.children();
    						

    说明:

    获取添加到Webview窗口中的所有子Webview窗口,如果没有子Webview窗口则返回空数组。

    参数:

    返回值:

    Array[ WebviewObject ] : 包含的子Webview窗口对象数组,没有则返回空数组。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var embed=null;
    // H5 plus事件处理
    function plusReady(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	plus.webview.currentWebview().append( embed );
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取子Webview窗口
    function listChildren() {
    	var list=plus.webview.currentWebview().children();
    	for(var i=0;i<list.length;i++){
    		console.log('Children['+i+']: '+list[i].getURL());
    	}
    }
    	</script>
    	</head>
    	<body>
    		获取Webview窗口的所有子Webview窗口
    		<button onclick="listChildren()">Children</button>
    	</body>
    </html>
    						

    clear

    清空原生Webview窗口加载的内容

    
    void wobj.clear();
    						

    说明:

    清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var embed=null;
    // H5 plus事件处理
    function plusReady(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	plus.webview.currentWebview().append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 清空Webview窗口
    function webviewClear() {
    	embed.clear();
    }
    	</script>
    	</head>
    	<body>
    		清空原生Webview窗口加载的内容
    		<button onclick="webviewClear()">Clear</button>
    	</body>
    </html>
    						

    close

    关闭Webview窗口

    
    void wobj.close( aniClose, duration, extras );
    						

    说明:

    关闭并销毁Webview窗口,可设置关闭动画和动画持续时间。

    参数:

    • aniClose: AnimationTypeClose ) 可选 关闭Webview窗口动画效果
      如果没有指定关闭窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。
    • duration: ( Number ) 可选 关闭Webview窗口的动画持续时间
      单位为ms,默认为窗口show方法设定的动画时间。
    • extras: WebviewExtraOptions ) 可选 关闭Webview窗口扩展参数
      可用于指定Webview窗口动画是否使用图片加速。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 关闭窗口
    function closeMe() {
    	ws.close();
    }
    	</script>
    	</head>
    	<body>
    		关闭Webview窗口
    		<button onclick="closeMe()">Close</button>
    	</body>
    </html>
    						

    drag

    设置Webview窗口的滑屏操作手势

    
    void wobj.drag(options, otherView, callback);
    						

    说明:

    将Webview窗口的左右滑动手势关联到其它Webview窗口,可实现滑动切换显示Webview的动画效果(如Tab页面切换效果)。 注意:滑屏操作会改变窗口位置(如left值等),如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内,如setStyle({left:'0px'});。

    参数:

    • options: WebviewDragOptions ) 必选 当前Webview窗口操作手势配置参数
    • otherView: WebviewDragOtherViewOptions ) 可选 操作手势关联的窗口配置参数
    • callback: WebviewDragCallback ) 可选 滑屏操作回调函数
      在滑屏手势操作过程中触发,一次滑屏操作至少会触发3次回调事件(开始、滑屏移动、结束)。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,wn=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 预创建新窗口(显示在可视区域外)
    	wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag',{left:'100%'});
    	wn.show('none');
    	// 左滑显示新窗口
    	ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){
    		console.log('Left drag event: '+JSON.stringify(e));
    	});
    	// 右滑隐藏新窗口
    	wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
    		console.log('Right drag event: '+JSON.stringify(e));
    	});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		左滑可打开新页面
    	</body>
    </html>
    						

    draw

    截屏绘制

    
    void wobj.draw( bitmap, successCallback, errorCallback, options );
    						

    说明:

    将Webview窗口的可视区域截屏并绘制到Bitmap图片对象中。

    参数:

    • bitmap: plus.nativeObj.Bitmap ) 可选 要绘制的图片对象
      如果图片中已经存在内容则覆盖,如果截屏绘制失败则保留之前的图片内容。
    • successCallback: SuccessCallback ) 可选 截屏绘制操作成功回调
      截屏绘制操作成功时调用。
    • errorCallback: ErrorCallback ) 可选 截屏绘制操作失败回调
      截屏绘制操作失败时调用,并返回失败信息。
    • options: WebviewDrawOptions ) 可选 截屏绘制操作参数
      设置控制截屏绘制区域、是否检测白屏等。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 截屏绘制
    var bitmap=null;
    function captureWebview() {
    	bitmap = new plus.nativeObj.Bitmap('test');
    	// 将webview内容绘制到Bitmap对象中
    	ws.draw(bitmap,function(){
    		console.log('截屏绘制图片成功');
    	},function(e){
    		console.log('截屏绘制图片失败:'+JSON.stringify(e));
    	});
    }
    	</script>
    	</head>
    	<body>
    		截屏绘制Webview窗口<br/>
    		<button onclick="captureWebview()">Draw</button>
    	</body>
    </html>
    						

    endPullToRefresh

    结束Webview窗口的下拉刷新

    
    void wobj.endPullToRefresh();
    						

    说明:

    关闭下拉刷新效果,恢复到开始下拉刷新之前的效果。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<meta name="HandheldFriendly" content="true"/>
    		<meta name="MobileOptimized" content="320"/>
    		<title>Webview Example</title>
    		<script type="text/javascript" charset="utf-8">
    var ws=null;
    var list=null;
    // 扩展API加载完毕,现在可以正常调用扩展API 
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setPullToRefresh({support:true,
    		height:'50px',
    		range:'200px',
    		contentdown:{
    			caption:'下拉可以刷新'
    		},
    		contentover:{
    			caption:'释放立即刷新'
    		},
    		contentrefresh:{
    			caption:'正在刷新...'
    		}
    	},onRefresh);
    	plus.nativeUI.toast('下拉可以刷新');
    }
    // 判断扩展API是否准备,否则监听'plusready'事件
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // DOM构建完成获取列表元素
    document.addEventListener('DOMContentLoaded', function(){
    	list=document.getElementById('list');
    })
    // 刷新页面
    function onRefresh(){
    	setTimeout(function(){
    		if(list){
    			var item=document.createElement('li');
    			item.innerHTML='<span>New Item '+(new Date())+'</span>';
    			list.insertBefore(item,list.firstChild);
    		}
    		ws.endPullToRefresh();
    	},2000);
    }
    		</script>
    		<style type="text/css">
    li {
    	padding: 1em;
    	border-bottom: 1px solid #eaeaea;
    }
    li:active {
    	background: #f4f4f4;
    }
    		</style>
    	</head>
    	<body>
    		<ul id="list" style="list-style:none;margin:0;padding:0;">
    			<li><span>Initializ List Item 1</span></li>
    			<li><span>Initializ List Item 2</span></li>
    			<li><span>Initializ List Item 3</span></li>
    			<li><span>Initializ List Item 4</span></li>
    			<li><span>Initializ List Item 5</span></li>
    			<li><span>Initializ List Item 6</span></li>
    			<li><span>Initializ List Item 7</span></li>
    			<li><span>Initializ List Item 8</span></li>
    			<li><span>Initializ List Item 9</span></li>
    			<li><span>Initializ List Item 10</span></li>
    		</ul>
    	</body>
    </html>
    						

    evalJS

    在Webview窗口中执行JS脚本

    
    void wobj.evalJS( js );
    						

    说明:

    将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。

    参数:

    • js: ( String ) 必选 要在窗口中运行的脚本字符串

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append( embed );
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 在Webview窗口中执行JS脚本
    function evalJS() {
    	embed.evalJS('alert("evalJS: "+location.href);');
    }
    	</script>
    	</head>
    	<body>
    		在Webview窗口中执行JS脚本
    		<button onclick="evalJS()">evalJS</button>
    	</body>
    </html>
    						

    forward

    前进到上次加载的页面

    
    void wobj.forward();
    						

    说明:

    Webview窗口历史记录操作,前进到窗口上次加载的HTML页面。 如果窗口历史记录中没有可前进的页面则不触发任何操作。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var embed=null;
    // H5 plus事件处理
    function plusReady(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	plus.webview.currentWebview().append( embed );
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 返回上次页面
    function goBack() {
    	embed.back();
    }
    // 前进到上次页面
    function goForward() {
    	embed.forward();
    }
    	</script>
    	</head>
    	<body>
    		前进到上次加载的页面
    		<button onclick="goBack()">Back</button>
    		<button onclick="goForward()">Forward</button>
    	</body>
    </html>
    						

    getFavoriteOptions

    获取Webview窗口的收藏参数

    
    WebviewFavoriteOptions wobj.getFavoriteOptions();
    						

    说明:

    获取Webview窗口的收藏参数,如收藏页面的标题、图标、地址等。

    参数:

    返回值:

    WebviewFavoriteOptions : 获取Webview窗口的收藏参数,如果未设置则返回null。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setFavoriteOptions({title:'收藏页标题',href:'http://www.dcloud.io/'});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取窗口的分享参数
    function getFavoriteOptions(){
    	var t = ws.getFavoriteOptions();
    	alert(t?"未设置":JSON.stringify(t));
    }
    	</script>
    	</head>
    	<body style="text-align:center;">
    		获取Webview窗口的收藏参数<br/>
    		<button onclick="getFavoriteOptions()">获取收藏参数</button>
    	</body>
    </html>
    						

    getShareOptions

    获取Webview窗口的分享参数

    
    WebviewShareOptions wobj.getShareOptions();
    						

    说明:

    获取Webview窗口的分享参数,如分享的标题、图标、链接地址等。

    参数:

    返回值:

    WebviewShareOptions : 获取Webview窗口的分享参数

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setShareOptions({title:'分享的标题',href:'http://www.dcloud.io/'});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取窗口的分享参数
    function getShareOptions(){
    	var t = ws.getShareOptions();
    	alert(t?"未设置":JSON.stringify(t));
    }
    	</script>
    	</head>
    	<body style="text-align:center;">
    		获取Webview窗口的分享参数<br/>
    		<button onclick="getShareOptions()">获取分享参数</button>
    	</body>
    </html>
    						

    getStyle

    获取Webview窗口的样式

    
    WebviewStyles wobj.getStyle();
    						

    说明:

    获取Webview窗口的样式属性,如窗口位置、大小等信息。

    参数:

    返回值:

    WebviewStyles : WebviewStyles对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取Webview窗口的样式
    function getStyle() {
    	var style=ws.getStyle();
    	alert( JSON.stringify(style) );
    }
    	</script>
    	</head>
    	<body>
    		获取Webview窗口的样式
    		<button onclick="getStyle()">getStyle</button>
    	</body>
    </html>
    						

    getSubNViews

    获取Webview窗口的原生子View控件对象

    
    Array<plus.nativeObj.View> wobj.getSubNViews();
    						

    说明:

    创建Webview窗口的所有原生子View控件。 可以在创建窗口时设置其subNViews属性自动创建(应用首页可通过manfest.json中的plus->launchwebview->subNNViews节点配置创建); 也可以通过Webview窗口的append方法将已经创建的原生View控件添加为其子。

    参数:

    返回值:

    Array[ plus.nativeObj.View ] : 原生View控件对象数组,如果没有原生子View控件则返回空数组

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	plus.key.addEventListener('backbutton', function(){
    		nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    	}, false);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    var nw=null;
    var subNViews=null;
    // 创建带原生子View控件的Webview窗口 
    function createWebview(){
    	nw=nw||plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',subNViews:[{
    		id:'subnview1',
    		styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},
    		tags:[{tag:'font',id:'font',text:'顶部原生子View控件',textStyles:{size:'18px'}}]
    	},{
    		id:'subnview2',
    		styles:{bottom:'0px',height:'100px',backgroundColor:'#00FF00'},
    		tags:[{tag:'font',id:'font',text:'底部原生子View控件',textStyles:{size:'18px'}}]
    	}]});
    	nw.addEventListener('close', function(){
    		nw=null;
    	}, false);
    	subNViews = nw.getSubNViews();
    	nw.show('pop-in');
    }
    // 更新顶部View控件 
    function updateTopView(){
    	var tv = subNViews[0];
    	tv.drawText('更新顶部子View控件内容',{},{},'font');
    }
    // 更新底部View控件 
    function updateBottomView(){
    	var bv = subNViews[0];
    	bv.drawText('更新底部子View控件内容',{},{},'font');
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口的子View控件<br/>
    		<button onclick="createWebview()">Create</button><br/>
    		<button onclick="updateTopView()">更新顶部View控件</button>
    		<button onclick="updateBottomView()">更新底部View控件</button>
    	</body>
    </html>
    						

    getTitle

    获取Webview窗口加载HTML页面的标题

    
    String wobj.getTitle();
    						

    说明:

    标题为HTML页面head节点下title节点中的文本内容,当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的标题。 如果HTML页面没有使用title节点来设置标题,则返回空字符串。

    参数:

    返回值:

    String : 窗口加载页面的标题

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'6px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取Webview窗口的标题
    function getTitle() {
    	alert( "标题为:"+embed.getTitle() );
    }
    	</script>
    	</head>
    	<body>
    		获取Webview窗口加载HTML页面的标题
    		<button onclick="getTitle()">getTitle</button>
    	</body>
    </html>
    						

    getTitleNView

    获取Webview窗口的标题栏控件对象

    
    plus.nativeObj.View wobj.getTitleNView();
    						

    说明:

    创建Webview窗口时设置其titleNView属性时则自动创建标题栏控件,应用首页可通过manfest.json中的plus->launchwebview->titleNView节点配置创建标题栏控件。 可通过此方法获取Webview窗口创建的标题栏控件,对象类型为plus.nativeObj.View,可通过调用其drawBitmap/drawRect/drawText方法绘制更新内容来实现自定义样式。

    参数:

    返回值:

    plus.nativeObj.View : 原生View控件对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var wn=null;
    // H5 plus事件处理
    function plusReady(){
    	wn=plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取Webview窗口的标题栏控件对象
    function getTitleNView() {
    	var nb=wn.getTitleNView();
    	nb.drawText('返回', {'top':'0px','left':'0px','width':'96px','height':'100%'});
    	wn.show();
    }
    	</script>
    	</head>
    	<body>
    		获取Webview窗口的标题栏控件对象<br/>
    		<button onclick="getTitleNView()">更新标题栏控件对象</button>
    	</body>
    </html>
    						

    getURL

    获取Webview窗口加载HTML页面的地址

    
    String wobj.getURL();
    						

    说明:

    当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的地址。

    参数:

    返回值:

    String : 窗口加载页面的URL地址

    平台支持:

    • Android - ALL (支持)
    • iOS - ALL (支持): 需要在页面loaded事件后才能获取最终的页面地址,在此之前获取的是当前加载的页面地址。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取Webview窗口加载HTML页面的地址
    function getURL() {
    	alert( "页面地址为:"+embed.getURL() );
    }
    	</script>
    	</head>
    	<body>
    		获取Webview窗口加载HTML页面的地址
    		<button onclick="getURL()">getURL</button>
    	</body>
    </html>
    						

    hide

    隐藏Webview窗口

    
    void wobj.hide( aniHide, duration, extras );
    						

    说明:

    隐藏Webview窗口可保存已加载HTML页面的上下文数据,能降低应用使用的系统资源,通过show方法可将隐藏的Webview窗口显示出来。

    参数:

    • aniHide: AnimationTypeClose ) 可选 隐藏Webview窗口动画效果
      如果没有指定隐藏窗口动画,则使用默认动画效果“none”。
    • duration: ( Number ) 可选 隐藏Webview窗口的动画持续时间
      单位为ms,默认为窗口show方法设定的动画时间。
    • extras: WebviewExtraOptions ) 可选 隐藏Webview窗口扩展参数
      可用于指定Webview窗口动画是否使用图片加速。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 隐藏Webview窗口
    function hideWebview() {
    	embed.hide();
    }
    	</script>
    	</head>
    	<body>
    		隐藏Webview窗口
    		<button onclick="hideWebview()">hide</button>
    	</body>
    </html>
    						

    interceptTouchEvent

    是否拦截Webview窗口的触屏事件

    
    void wobj.interceptTouchEvent(intercept);
    						

    说明:

    拦截后触屏事件不再传递,否则传递给View控件下的其它窗口处理。 Webview窗口默认拦截所有触屏事件。

    参数:

    • intercept: ( Boolean ) 可选 是否拦截触屏事件
      true表示拦截触屏事件,false表示不拦截触屏事件(透传事件给其它窗口处理)。 默认值为true。

    返回值:

    void : 无

    平台支持:

    • Android - 3.0+ (支持)
    • iOS - ALL (不支持)

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<title>Webview Example</title>
    		<script type="text/javascript">
    var wv=null;
    // H5 plus事件处理
    function plusReady(){
    	wv = plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 拦截触屏事件 
    function interceptEvent(){
    	wv.interceptTouchEvent(true);
    }
    // 不拦截触屏事件 
    function uninterceptEvent(){
    	wv.interceptTouchEvent(false);
    }
    		</script>
    	</head>
    	<body>
    		是否拦截Webview窗口的触屏事件<br/>
    		<button onclick="uninterceptEvent()">不拦截触屏事件</button><br/>
    		<button onclick="interceptEvent()">拦截触屏事件</button><br/>
    	</body>
    </html>
    						

    isHardwareAccelerated

    查询Webview窗口是否开启硬件加速

    
    Boolean wobj.isHardwareAccelerated();
    						

    说明:

    若Webview窗口已经开启硬件加速则返回true,否则返回false。

    参数:

    返回值:

    Boolean : Webview窗口是否开启硬件加速

    平台支持:

    • Android - 3.0+ (支持): 5+ Runtime会根据当前设备环境来决定是否开启硬件加速,也可通过WebviewStyles对象的hardwareAccelerated属性来强制设置是否开启硬件加速。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 查询Webview窗口是否开启硬件加速
    function isHardwareAccelerated() {
    	alert('是否开启硬件加速:'+ws.isHardwareAccelerated());
    }
    	</script>
    	</head>
    	<body>
    		查询Webview窗口是否开启硬件加速
    		<button onclick="isHardwareAccelerated()">isHardwareAccelerated</button>
    	</body>
    </html>
    						

    isVisible

    查询Webview窗口是否可见

    
    Boolean wobj.isVisible();
    						

    说明:

    若Webview窗口已经显示(调用过show方法,即使被其它窗口挡住了也认为已显示)则返回true,若Webview窗口被隐藏则返回false。

    参数:

    返回值:

    Boolean : Webview窗口是否可见

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 查询Webview窗口是否可见
    function visibleWebview() {
    	alert('是否可见:'+embed.isVisible());
    }
    // 隐藏Webview窗口
    function hideWebview() {
    	embed.hide();
    }
    	</script>
    	</head>
    	<body>
    		查询Webview窗口是否可见
    		<button onclick="visibleWebview()">isVisible</button>
    		<button onclick="hideWebview()">hide</button>
    	</body>
    </html>
    						

    listenResourceLoading

    监听页面开始加载资源

    
    void wobj.listenResourceLoading(options, callback);
    						

    说明:

    Webview加载资源时,如果满足options参数中定义的条件,则触发callback回调。 此方法仅触发回调事件,不会阻止资源的加载。

    参数:

    返回值:

    void : 无

    平台支持:

    • Android - ALL (支持): 5+APP需要选择“解压资源后运行”模式后才能监听加载资源。
    • iOS - ALL (不支持)

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,nw=null;
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 监听页面加载资源
    function listenResourceLoading() {
    	var wv=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	// 监听到页面加载图片资源时显示({match:'.*\.(jpg|png|jpeg|bmp)\b'})
    	wv.listenResourceLoading({match:'.*\\.(jpg|png|jpeg|bmp)\\b'}, function(e){
            console.log('loading resource: '+e.url);
            wv.show();
        });
        console.log('create webview');
    }
    	</script>
    	</head>
    	<body>
    		监听页面开始加载资源
    		<button onclick="listenResourceLoading()">加载图片资源时显示窗口</button>
    	</body>
    </html>
    						

    loadData

    加载新HTML数据

    
    void wobj.loadData(data, options);
    						

    说明:

    触发Webview窗口加载HTML页面数据,如果HTML数据无效将导致页面加载失败。

    参数:

    • data: ( String ) 必选 要加载的HTML数据
    • options: WebviewLoadDataOptions ) 可选 加载HTML数据的配置参数
      如设置Base URL等。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 加载新HTML数据
    function loadHtmlData() {
    	embed.loadData( '<html><body>Hello! loadData!</body></html>' );
    }
    	</script>
    	</head>
    	<body>
    		加载新HTML数据
    		<button onclick="loadHtmlData()">loadData</button>
    	</body>
    </html>
    						

    loadURL

    加载新URL页面

    
    void wobj.loadURL(url, additionalHttpHeaders);
    						

    说明:

    触发Webview窗口从新的URL地址加载页面,如果url地址无效将导致页面显示失败。

    参数:

    • url: ( String ) 必选 要加载的页面URL地址
    • additionalHttpHeaders: ( JSON ) 可选 窗口加载URL页面时额外添加的HTTP请求头数据
      仅对加载此次URL地址时有效。 如果HTTP请求头中已经包含需要额外添加的头数据,则添加的请求数据覆盖默认值。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 加载新URL页面
    function loadHtmlUrl() {
    	embed.loadURL('http://m.weibo.cn/');
    }
    	</script>
    	</head>
    	<body>
    		加载新URL页面
    		<button onclick="loadHtmlUrl()">loadURL</button>
    	</body>
    </html>
    						

    nativeInstanceObject

    获取Webview窗口对象的原生(Native.JS)实例对象

    
    InstanceObject wobj.nativeInstanceObject();
    						

    说明:

    Android平台返回Webview窗口对象的android.webkit.Webview实例对象, iOS平台返回Webview窗口对象的UIWebview实例对象。

    参数:

    返回值:

    InstanceObject : Webview窗口对象的原生(Native.JS)实例对象。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var nws=null;
    // H5 plus事件处理
    function plusReady(){
    	// 获取当前Webview实例的原生(Native.JS)实例对象
    	nws=plus.webview.currentWebview().nativeInstanceObject();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		获取Webview窗口对象的原生(Native.JS)实例对象
    	</body>
    </html>
    						

    opened

    获取在当前Webview窗口中创建的所有窗口

    
    Array[WebviewObject] wobj.opened();
    						

    说明:

    返回从当前Webview中调用plus.webview.open或plus.webview.create创建的所有Webview窗口数组。

    参数:

    返回值:

    Array[ WebviewObject ] : 此窗口创建的Webview窗口对象数组,没有则返回空数组。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取在当前Webview窗口中创建的所有窗口
    function openedWebview() {
    	var list=ws.opened();
    	for(var i=0;i<list.length;i++){
    		alert('opened['+i+']: '+list[i].getURL());
    	}
    }
    	</script>
    	</head>
    	<body>
    		获取在当前Webview窗口中创建的所有窗口
    		<button onclick="openedWebview()">opened</button>
    	</body>
    </html>
    						

    opener

    获取当前Webview窗口的创建者

    
    WebviewObject wobj.opener();
    						

    说明:

    创建者为调用plus.webview.open或plus.webview.create方法创建当前窗口的Webview窗口。

    参数:

    返回值:

    WebviewObject : 创建当前窗口的Webview窗口对象

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 取当前Webview窗口的创建者
    function openerWebview() {
    	var wo=embed.opener();
    	alert('opener: '+wo.getURL());
    }
    	</script>
    	</head>
    	<body>
    		获取当前Webview窗口的创建者
    		<button onclick="openerWebview()">opener</button>
    	</body>
    </html>
    						

    overrideResourceRequest

    拦截Webview窗口的资源加载

    
    void wobj.overrideResourceRequest(options);
    						

    说明:

    根据区配规则拦截Webview窗口加载资源的URL地址,重定向到其它资源地址(暂仅支持本地地址)。 注意:多次调用overrideResourceRequest时仅以最后一次调用设置的参数值生效。

    参数:

    返回值:

    void : 无

    平台支持:

    • Android - ALL (支持): 5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。
    • iOS - ALL (支持): 不限定拦截当前Webview窗口加载的资源,而是拦截应用中所有Webview窗口加载的资源。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,nw=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 拦截Webview窗口的资源请求
    	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	nw.overrideResourceRequest([{match:'http://tva3.sinaimg.cn/crop.121.80.980.980.180/be8dcc14gw1e7lz65y6g3j20uo0uoq4r.jpg',redirect:'_www/logo.png'}]);
    	nw.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		拦截Webview窗口的资源加载
    	</body>
    </html>
    						

    overrideUrlLoading

    拦截Webview窗口的URL请求

    
    void wobj.overrideUrlLoading(options, callback);
    						

    说明:

    拦截URL请求后,Webview窗口将不会跳转到新的URL地址,此时将通过callback回调方法返回拦截的URL地址(可新开Webview窗口加载URL页面等)。 此方法只能拦截窗口的网络超链接跳转(包括调用loadURL方法触发的跳转),不可拦截页面请求资源请求(如加载css/js/png等资源的请求)。 注意:多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。

    参数:

    返回值:

    void : 无

    平台支持:

    • Android - ALL (支持): 5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。
    • iOS - ALL (支持)

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,nw=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	nw.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 拦截Webview窗口的URL请求
    function overrideUrl() {
    	// 拦截所有页面跳转,可使用参数拦截weibo.com域名之外的跳转({mode:'allow',match:'.*weibo\.com/.*'})
    	nw.overrideUrlLoading({mode:'reject'}, function(e){
            console.log('reject url: '+e.url);
        });
    }
    	</script>
    	</head>
    	<body>
    		拦截Webview窗口的URL请求
    		<button onclick="overrideUrl()">overrideUrlLoading</button>
    	</body>
    </html>
    						

    parent

    获取当前Webview窗口的父窗口

    
    WebviewObject wobj.parent();
    						

    说明:

    Webview窗口作为子窗口添加(Webview.append)到其它Webview窗口中时有效,这时其它Webview窗口为父窗口。

    参数:

    返回值:

    WebviewObject : 父Webview窗口对象,没有则返回null。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 获取当前Webview窗口的父窗口
    function parentWebview() {
    	var wp=embed.parent();
    	alert( "parent: "+wp.getURL() );
    }
    	</script>
    	</head>
    	<body>
    		获取当前Webview窗口的父窗口
    		<button onclick="parentWebview()">parent</button>
    	</body>
    </html>
    						

    reload

    重新加载Webview窗口显示的HTML页面

    
    void wobj.reload( force );
    						

    说明:

    触发Webview窗口重新加载当前显示的页面内容。 如果当前HTML页面未加载完则停止并重新加载,如果当前Webview窗口没有加载任何页面则无响应。

    参数:

    • force: ( Boolean ) 必选 是否强制不使用缓存
      为加速HTML页面加载速度,默认在重新加载时会使用缓存,若force设置为true则不使用缓存,重新从URL地址加载所有页面内容。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 重新加载Webview窗口显示的HTML页面
    function reloadWebview() {
    	embed.reload(true);
    }
    	</script>
    	</head>
    	<body>
    		重新加载Webview窗口显示的HTML页面
    		<button onclick="reloadWebview()">reload</button>
    	</body>
    </html>
    						

    resetBounce

    重置Webview窗口的回弹位置

    
    void wobj.resetBounce();
    						

    说明:

    开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置。 这时需要调用此方法来重置窗口的回弹位置,窗口将采用动画方式回弹到其初始显示的位置。

    参数:

    返回值:

    void : 无

    平台支持:

    • Android - 2.2+ (支持)
    • iOS - ALL (不支持)

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 重置窗口回弹位置
    function resetBounce(){
    	ws.resetBounce();
    }
    	</script>
    	</head>
    	<body style="text-align:center;">
    		<br/><br/><br/>
    		设置Webview窗口的回弹效果<br/>
    		回弹后显示停靠到44px的位置<br/><br/>
    		<button onclick="resetBounce()">重置回弹位置</button>
    		<br/><br/><br/>
    		*暂仅支持顶部的回弹效果*
    	</body>
    </html>
    						

    restore

    恢复Webview控件显示内容

    
    void wobj.restore();
    						

    说明:

    恢复调用animate方法改变Webview控件的内容,更新至动画前显示的内容。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<title>Webview Example</title>
    		<script type="text/javascript">
    var wv=null;
    // H5 plus事件处理
    function plusReady(){
    	wv = plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // Webview窗口内容动画 
    function animateWebview(){
    	wv.animate({type:'shrink',frames:20,region:{top:'100px',bottom:'48px'},duration:1000},function(){
    		console.log('Webview窗口内容动画结束');
    	});
    }
    // Webview窗口内容恢复
    function restoreWebview(){
    	wv.restore();
    }
    		</script>
    	</head>
    	<body>
    		Webview窗口内容动画<br/>
    		<button onclick="animateWebview()">内容动画</button><br/>
    		<button onclick="restoreWebview()">内容恢复</button><br/>
    	</body>
    </html>
    					

    remove

    移除子Webview窗口

    
    void wobj.remove( webview );
    						

    说明:

    从当前Webview窗口移除指定的子Webview窗口,若指定的webview对象不是当前窗口的子窗口则无任何作用。 移除后子Webview窗口不会关闭,需要调用其close方法才能真正关闭并销毁。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 移除子Webview窗口
    function removeWebview() {
    	ws.remove(embed);
    	embed.close();
    }
    	</script>
    	</head>
    	<body>
    		移除子Webview窗口
    		<button onclick="removeWebview()">remove</button>
    	</body>
    </html>
    						

    removeEventListener

    移除Webview窗口事件监听器

    
    void wobj.removeEventListener( event, listener );
    						

    说明:

    从Webview窗口移除通过addEventListener方法添加的事件监听器,若没有查找到对应的事件监听器,则无任何作用。

    参数:

    • event: NWindowEvent ) 必选 要移除的事件类型
    • listener: EventCallback ) 必选 要移除监听函数对象

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.addEventListener('loaded', embedLoaded, false);
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 页面跳转监听器
    function embedLoaded(e){
    	alert('Loaded: '+embed.getURL());
    }
    // 移除Webview窗口事件监听器
    function removeEvent() {
    	embed.removeEventListener('loaded', embedLoaded);
    }
    	</script>
    	</head>
    	<body>
    		移除Webview窗口事件监听器
    		<button onclick="removeEvent()">removeEventListener</button>
    	</body>
    </html>
    						

    removeFromParent

    从父窗口中移除

    
    void wobj.removeFromParent();
    						

    说明:

    从所属的父Webview窗口移除,如果没有父窗口,则无任何作用。 从父窗口中移除后子Webview窗口不会关闭,需要调用其close方法才能真正关闭并销毁。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 从父窗口中移除
    function removeFromeWebview() {
    	embed.removeFromParent();
    	embed.close();
    }
    	</script>
    	</head>
    	<body>
    		从父窗口中移除
    		<button onclick="removeFromeWebview()">removeFromParent</button>
    	</body>
    </html>
    						

    setBounce

    设置Webview窗口的回弹效果

    
    void wobj.setBounce( style );
    						

    说明:

    开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置(可通过style设置)。 拖拽窗口内容时页面显示Webview窗口的背景色,默认为透明,此时显示Webview下面的内容,利用这个特点可以实现自定下拉刷新特效。

    参数:

    • style: WebviewBounceStyle ) 必选 Webview窗口回弹样式参数
      可设置窗口的回弹效果支持的方向,自动回弹后停靠的位置等参数。

    返回值:

    void : 无

    平台支持:

    • Android - 2.2+ (支持)
    • iOS - ALL (不支持)

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body style="text-align:center;">
    		<br/><br/><br/>
    		设置Webview窗口的回弹效果<br/><br/><br/>
    		*暂仅支持顶部的回弹效果*
    	</body>
    </html>
    						

    setBlockNetworkImage

    设置Webview窗口是否阻塞加载页面中使用的网络图片

    
    void wobj.setBlockNetworkImage( block );
    						

    参数:

    • block: ( Boolean ) 必选 是否阻塞加载网络图片
      true表示不加载页面中使用的网络图片,false表示加载也页面中使用的网络图片。

    返回值:

    void : 无

    平台支持:

    • Android - 2.2+ (支持)
    • iOS - ALL (不支持)

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    function blockOpen(){
    	// 阻塞网络图片模式打开页面
    	var w=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {blockNetworkImage:true});
    	w.addEventListener('loaded', function(){
    		w.show('slide-in-right', 300);
    		// 加载网络图片
    		w.setBlockNetworkImage(false);
    	}, false);
    }
    	</script>
    	</head>
    	<body>
    		显示窗口后再加载网络图片<br/>
    		<button onclick="blockOpen()">打开页面</button>
    	</body>
    </html>
    						

    setContentVisible

    设置HTML内容是否可见

    
    void wobj.setContentVisible( visible );
    						

    说明:

    设置HTML内容不可见后,将显示Webview窗口的背景色。

    参数:

    • visible: ( Boolean ) 必选 设置页面是否可见,true表示可见,false表示不可见

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 设置HTML内容是否可见
    function setContentVisible(v) {
    	embed.setContentVisible(v);
    }
    	</script>
    	</head>
    	<body>
    		设置HTML内容是否可见<br/>
    		<button onclick="setContentVisible(true)">可见</button><br/>
    		<button onclick="setContentVisible(false)">不可见</button><br/>
    	</body>
    </html>
    						

    setFavoriteOptions

    设置Webview窗口的收藏参数

    
    void wobj.setFavoriteOptions(options);
    						

    说明:

    仅在流应用环境(流应用/5+浏览器)中有效:用户点击流应用环境的收藏按钮时使用的参数,如设置收藏页面标题,图标、页面地址等。

    参数:

    • options: WebviewFavoriteOptions ) 必选 Webview窗口收藏参数
      可设置窗口的收藏标题,图标、页面地址等信息。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setFavoriteOptions({title:'收藏页标题', href:'http://www.dcloud.io/'});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body style="text-align:center;">
    		设置Webview窗口的收藏参数
    	</body>
    </html>
    						

    setPullToRefresh

    设置Webview窗口的下拉刷新效果

    
    void wobj.setPullToRefresh( style, refreshCB );
    						

    说明:

    开启Webview窗口的下拉刷新功能,显示窗口内置的下拉刷新控件样式。

    参数:

    • style: WebviewPullToRefreshStyles ) 必选 Webview窗口下拉刷新样式参数
      可设置窗口内置的下拉刷新控件在各种状态显示的文字内容。
    • refreshCB: SuccessCallback ) 必选 Webview窗口下拉刷新事件回调
      用户操作窗口的下拉刷新触发窗口刷新事件时触发。

    返回值:

    void : 无

    平台支持:

    • Android - 2.2+ (支持)
    • iOS - ALL (支持)

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<meta name="HandheldFriendly" content="true"/>
    		<meta name="MobileOptimized" content="320"/>
    		<title>Webview Example</title>
    		<script type="text/javascript" charset="utf-8">
    var ws=null;
    var list=null;
    // 扩展API加载完毕,现在可以正常调用扩展API 
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setPullToRefresh({support:true,
    		height:'50px',
    		range:'200px',
    		contentdown:{
    			caption:'下拉可以刷新'
    		},
    		contentover:{
    			caption:'释放立即刷新'
    		},
    		contentrefresh:{
    			caption:'正在刷新...'
    		}
    	},onRefresh);
    	plus.nativeUI.toast('下拉可以刷新');
    }
    // 判断扩展API是否准备,否则监听'plusready'事件
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // DOM构建完成获取列表元素
    document.addEventListener('DOMContentLoaded',function(){
    	list=document.getElementById('list');
    })
    // 刷新页面
    function onRefresh(){
    	setTimeout(function(){
    		if(list){
    			var item=document.createElement('li');
    			item.innerHTML='<span>New Item '+(new Date())+'</span>';
    			list.insertBefore(item,list.firstChild);
    		}
    		ws.endPullToRefresh();
    	},2000);
    }
    		</script>
    		<style type="text/css">
    li {
    	padding: 1em;
    	border-bottom: 1px solid #eaeaea;
    }
    li:active {
    	background: #f4f4f4;
    }
    		</style>
    	</head>
    	<body>
    		<ul id="list" style="list-style:none;margin:0;padding:0;">
    			<li><span>Initializ List Item 1</span></li>
    			<li><span>Initializ List Item 2</span></li>
    			<li><span>Initializ List Item 3</span></li>
    			<li><span>Initializ List Item 4</span></li>
    			<li><span>Initializ List Item 5</span></li>
    			<li><span>Initializ List Item 6</span></li>
    			<li><span>Initializ List Item 7</span></li>
    			<li><span>Initializ List Item 8</span></li>
    			<li><span>Initializ List Item 9</span></li>
    			<li><span>Initializ List Item 10</span></li>
    		</ul>
    	</body>
    </html>
    						

    setRenderedEventOptions

    设置Webview窗口rendered事件参数

    
    void wobj.setRenderedEventOptions(options);
    						

    说明:

    可设置页面渲染完成的判断标准,如判断页面顶部区域、中间区域、或底部区域。

    参数:

    返回值:

    void : 无

    平台支持:

    • Android - 2.2+ (支持)
    • iOS - ALL (不支持)

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var nw=null;
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 创建Webview窗口监听rendering事件
    function createWebview(){
    	// 打开新窗口
    	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	nw.addEventListener('rendered', function(e){
    		console.log('Webview rendered');
    	}, false);
    	nw.setRenderedEventOptions({type:'bottom',interval:100});// 检查底部区域是否渲染完成,每隔100毫秒检查一次
    	nw.show();
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口渲染完成事件
    		<button onclick="createWebview()">Show</button>
    	</body>
    </html>
    						

    setStyle

    设置Webview窗口的样式

    
    void wobj.setStyle( styles );
    						

    说明:

    更新Webview窗口的样式,如窗口位置、大小、背景色等。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 设置Webview窗口的样式
    function updateStyle(){
    	embed.setStyle({top:'92px'});
    }
    	</script>
    	</head>
    	<body>
    		设置Webview窗口的样式
    		<button onclick="updateStyle()">setStyle</button>
    	</body>
    </html>
    						

    setShareOptions

    设置Webview窗口的分享参数

    
    void wobj.setShareOptions(options);
    						

    说明:

    仅在流应用环境(流应用/5+浏览器)中有效:用户点击流应用环境的分享按钮时使用的参数,如设置分享的标题、链接地址等。

    参数:

    • options: WebviewShareOptions ) 必选 Webview窗口分享参数
      可设置分享的标题、链接地址等信息。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setShareOptions({title:'分享的标题',href:'http://www.dcloud.io/'});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body style="text-align:center;">
    		设置Webview窗口的分享参数
    	</body>
    </html>
    						

    setJsFile

    设置预加载的JS文件

    
    void wobj.setJsFile( path );
    						

    说明:

    预加载JS文件不需要在HTML页面中显式引用,在Webview窗口加载HTML页面时自动加载,在页面跳转时也会自动加载。 设置新的JS文件后将清空之前设置的值。

    参数:

    • file: ( String ) 必选 预载入的JS文件地址,仅支持本地文件,格式为相对路径URL(plus.io.RelativeURL),如"_www/preload.js"

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.setJsFile('_www/js/preload.js');
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		设置预加载的JS文件
    	</body>
    </html>
    						

    setCssFile

    设置预加载的CSS文件

    
    void wobj.setCssFile( path );
    						

    说明:

    预加载CSS文件不需要在HTML页面中显式引用,在Webview窗口加载HTML页面时自动加载,在页面跳转时也会自动加载。 设置新的CSS文件后将清空之前设置的值(包括调用setCssText设置的值)。

    参数:

    • file: ( String ) 必选 预载入的CSS文件地址,仅支持本地文件,格式为相对路径URL(plus.io.RelativeURL),如"_www/preload.css"

    返回值:

    void : 无

    平台支持:

    • Android - ALL (支持): 如果Webview加载的html页面中存在网络css资源请求,将会把要加载的CSS文件添加到第一个请求css资源(url以“.css”结尾)后面。 否则在页面加载完毕后自动注入JS添加style节点引用要加载的CSS文件。
    • iOS - ALL (支持): iOS7及以上版本在Webvew加载的html页面自动添加style节点引用要加载的CSS文件。 iOS7以前的版本在页面加载完毕后自动注入JS添加style节点引用要加载的CSS文件。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.setCssFile('_www/js/preload.css');
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		设置加载的CSS文件
    	</body>
    </html>
    						

    setCssText

    设置预加载的CSS内容

    
    void wobj.setCssText( text );
    						

    说明:

    预加载CSS内容不需要在HTML页面中显式引用,在Webview窗口加载HTML页面时自动加载,在页面跳转时也会自动加载。 设置新的CSS内容后将清空之前设置的值(包括调用setCssFile设置的值)。

    参数:

    • text: ( String ) 必选 预载入的CSS内容,必须符合CSS语法格式,如"body{background:red;}"

    返回值:

    void : 无

    平台支持:

    • Android - ALL (支持): 如果Webview加载的html页面中存在网络css资源请求,将会把要加载的CSS内容添加到第一个请求css资源(url以“.css”结尾)后面。 否则在页面加载完毕后自动注入JS添加style节点引用要加载的CSS内容。
    • iOS - ALL (支持): iOS7及以上版本在Webvew加载的html页面自动添加style节点引用要加载的CSS内容。 iOS7以前的版本在页面加载完毕后自动注入JS添加style节点引用要加载的CSS内容。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.setCssText('body{background:red;}');
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		设置加载的CSS内容
    	</body>
    </html>
    						

    setVisible

    设置Webview窗口是否可见

    
    void wobj.setVisible( visible );
    						

    说明:

    修改窗口是否可见并不影响窗口的显示栈顺序,窗口显示与隐藏也不会有动画效果。

    参数:

    • visible: ( Boolean ) 必选 设置Webview窗口是否可见,true表示可见,false表示不可见

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 设置Webview窗口是否可见
    function setVisible(v) {
    	embed.setVisible(v);
    }
    	</script>
    	</head>
    	<body>
    		设置Webview窗口是否可见<br/>
    		<button onclick="setVisible(true)">可见</button><br/>
    		<button onclick="setVisible(false)">不可见</button><br/>
    	</body>
    </html>
    						

    setFixBottom

    设置Webview窗口底部修复区域高度

    
    void wobj.setFixBottom( height );
    						

    说明:

    如果Webview加载页面中存在底部停靠区域(如“蘑菇街”WAP页面的底部Tab栏),在页面滚动时动态改变Webview高度可能会出现底部停靠区域抖动的现象(如360浏览器中向上滑顶部标题栏自动消失引起Webview变高)。 此时可以调用此方法来指定底部停靠区域(通常是底部Tab栏)进行优化修复抖动效果,高度值为底部停靠区域的高度。

    参数:

    • height: ( Number ) 必选 需要优化修复的区域高度
      单位为像素值。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.mogujie.com/', 'test');
    	// 设置Webview窗口底部优化修复区域高度
    	embed.setFixBottom(54);
    	embed.show();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		设置Webview窗口底部修复区域高度<br/>
    	</body>
    </html>
    						

    show

    显示Webview窗口

    
    void wobj.show( aniShow, duration, showedCB, extras );
    						

    说明:

    当调用plus.webview.create方法创建Webview窗口后,需要调用其show方法才能显示,并可设置窗口显示动画及动画时间。 Webview窗口被隐藏后也可调用此方法来重新显示。

    参数:

    • aniShow: AnimationTypeShow ) 可选 Webview窗口显示动画类型
      如果没有指定窗口动画类型,则使用默认值“none”,即无动画。
    • duration: ( Number ) 可选 Webview窗口显示动画持续时间
      单位为ms,默认使用动画类型相对应的默认时间。
    • showedCB: SuccessCallback ) 可选 Webview窗口显示完成的回调函数
      当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。
    • extras: WebviewExtraOptions ) 可选 显示Webview窗口扩展参数
      可用于指定Webview窗口动画是否使用图片加速。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 创建并显示Webview窗口
    function showWebview(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.show('slide-in-right', 300);
    }
    	</script>
    	</head>
    	<body>
    		显示Webview窗口
    		<button onclick="showWebview()">show</button>
    	</body>
    </html>
    						

    showBehind

    在指定Webview窗口后显示

    
    void wobj.showBehind( webview );
    						

    说明:

    当调用plus.webview.create方法创建Webview窗口后,可调用其showBehind方法显示在指定Webview窗口之后。 这种显示方式不会出现动画效果,当指定的Webview窗口关闭后,则自身窗口自动显示出来。

    参数:

    • webview: WebviewObject ) 可选 指定的Webview窗口对象
      如果没有指定Webview窗口对象或指定的Webview窗口对象无效(如已经被关闭)则自身窗口直接无动画显示出来。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 创建并显示在当前Webview窗口之后
    function showWebview(){
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.showBehind(ws);	// 在当前窗口之后显示
    }
    	</script>
    	</head>
    	<body>
    		在指定Webview窗口后显示
    		<button onclick="showWebview()">show</button><br/>
    		<button onclick="ws.close()">Close</button>
    	</body>
    </html>
    						

    stop

    停止加载HTML页面内容

    
    void wobj.stop();
    						

    说明:

    触发Webview窗口停止加载页面内容,如果已经加载部分内容则显示部分内容,如果加载完成则显示全部内容。

    参数:

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 停止加载HTML页面内容
    function stopWebview(){
    	embed.stop();
    }
    	</script>
    	</head>
    	<body>
    		停止加载HTML页面内容
    		<button onclick="stopWebview()">stop</button>
    	</body>
    </html>
    						

    updateSubNViews

    更新Webview窗口的原生子View控件对象

    
    void wobj.updateSubNViews(Array[WebviewSubNViewStyles] styles);
    						

    说明:

    通过WebviewSubNViewStyles中的id属性值匹配子View控件更新绘制内容,如果没有查找到对应id的子View控件则忽略。 此操作仅更新子View控件上绘制的内容,不会添加或删除原生子View控件对象。

    参数:

    • styles: ( Array[ WebviewSubNViewStyles ] ) 必选 要更新的子View控件样式
      不包括不需要更新的子View控件样式。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	plus.key.addEventListener('backbutton', function(){
    		nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    	}, false);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    var nw=null;
    // 创建带原生子View控件的Webview窗口 
    function createWebview(){
    	var styles = {
    		top:'100px',
    		bottom:'0px',
    		popGesture:'hide',
    		subNViews:[{
    			id:'subnview1',
    			styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},
    			tags:[{tag:'font',id:'font',text:'原生子View控件',textStyles:{size:'18px'}}]
    		}]
    	};
    	nw||(nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles),
    	nw.addEventListener('close', function(){
    		nw=null;
    	}, false));
    	nw.show('pop-in');
    }
    // 更新原生子View控件
    function updateSubNViews(){
    	nw.updateSubNViews([{
    		id:'subnview1',
    		tags:[{tag:'font',id:'font',text:'更新后的原生子View控件',textStyles:{size:'18px'}}]
    	}]);
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口的子View控件<br/>
    		<button onclick="createWebview()">Create</button>
    		<button onclick="updateSubNViews()">Update</button>
    	</body>
    </html>
    						

    onclose

    Webview窗口关闭事件

    说明:

    EventCallback 类型

    当Webview窗口关闭时触发此事件,类型为EventCallback。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.onclose=embedClose;
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 页面关闭事件回调函数
    function embedClose(e){
    	alert( "Closed!" );
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口关闭事件
    		<button onclick="embed.close()">onclose</button>
    	</body>
    </html>
    						

    onerror

    Webview窗口错误事件

    说明:

    WebviewEvent 类型

    当Webview窗口加载错误时触发此事件,类型为EventCallback。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.onerror=embedError;
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 页面错误事件回调函数
    function embedError(e){
    	alert('Error!');
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口错误事件
    		<button onclick="embed.loadData('<xml>Not html</xml>')">onerror</button>
    	</body>
    </html>
    						

    onloaded

    Webview窗口页面加载完成事件

    说明:

    WebviewEvent 类型

    当Webview窗口页面加载完成时触发此事件,类型为EventCallback。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.onloaded=embedLoaded;
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 页面加载完成事件回调函数
    function embedLoaded(e){
    	alert('Loaded!');
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口页面加载完成事件
    		<button onclick="embed.loadURL('http://m.weibo.cn')">onloaded</button>
    	</body>
    </html>
    						

    onloading

    Webview窗口页面开始加载事件

    说明:

    WebviewEvent 类型

    当Webview窗口开始加载新页面时触发此事件,类型为EventCallback。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,embed=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    	embed.onloading=embedLoading;
    	ws.append(embed);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 页面开始加载事件回调函数
    function embedLoading(e){
    	alert('Loading!');
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口页面开始加载事件
    		<button onclick="embed.loadURL('http://m.weibo.cn')">onloading</button>
    	</body>
    </html>
    						

    WebviewAnimationOptions

    Webview窗口动画参数

    
    interface WebviewAnimationOptions {
    	attribute WebviewObject view;
    	attribute WebviewAnimationStyles styles;
    	attribute String action;
    }				

    说明:

    用于指定动画目标窗口,起始位置、目标位置等信息。

    属性:

    • view: (WebviewObject 类型 )执行动画的窗口对象

      可取值Webview窗口对象、Webview窗口的id(String类型)、原生View窗口对象(plus.nativeObj.View)。

    • styles: (WebviewAnimationStyles 类型 )动画样式

      用于指定动画窗口的起始位置,目标位置等。

    • action: (String 类型 )窗口动画完成后的行为

      可取值: "none" - 动画完成后不做任何操作; "hide" - 动画完成后隐藏窗口; "close" - 动画完成后关闭窗口。 默认值为"none"。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,wn=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 预创建新窗口(显示在可视区域外)
    	wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag', {left:'100%',render:'always'});
    	wn.show('none');
    	// 右滑隐藏新窗口
    	wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
    		console.log('Right drag event: '+JSON.stringify(e));
    	});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 窗口组合动画
    function webviewAnimation(){
    	plus.webview.startAnimation({view:ws,styles:{fromLeft:'0%',toLeft:'-100%'},action:'none'},
    	{view:wn,styles:{fromLeft:'100%',toLeft:'0%'},action:'none'},
    	function(e){
    		console.log('Animation finished: '+JSON.stringify(e));
    	});
    }
    	</script>
    	</head>
    	<body>
    		<br/><br/>
    		<button onclick="webviewAnimation()">窗口组合动画显示新窗口</button>
    		<br/><br/>
    		在新窗口中可以右滑返回(新窗口移动到屏幕外)
    	</body>
    </html>
    			

    WebviewAnimationStyles

    Webview窗口动画样式

    
    interface WebviewAnimationStyles {
    	attribute String fromLeft;
    	attribute String toLeft;
    }				

    说明:

    用于指定动画窗口的起始位置、目标位置等信息。

    属性:

    • fromLeft: (String 类型 )画窗口的起始左侧位置

      支持百分比、像素值,默认值为当前窗口的位置。

    • toLeft: (String 类型 )画窗口的目标左侧位置

      持百分比、像素值。 注意:如果设置的位置与起始位置一直,则无动画效果。

    WebviewBounceStyle

    Webview窗口回弹样式

    属性:

    • position: (JSON 类型 )Webview窗口支持回弹效果的方向

      可通过此参数设置开启Webview哪个方向支持回弹效果。 支持以下属性: top:表示窗口顶部支持回弹效果; left:表示窗口左侧支持回弹效果; right:表示窗口右侧支持回弹效果; bottom:表示窗口底部支持回弹效果。 **目前仅支持top属性** 属性值:用于指定可拖拽的范围,可取百分比,如"10%";像素值,如"100px";自动计算值,如"auto";无回弹效果值,如"none";

    • changeoffset: (JSON 类型 )Webview窗口回弹时停靠的位置

      开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,拖拽过程中将触发"dragBounce"事件,松开后自动回弹到停靠位置。 支持以下属性: top:表示窗口顶部回弹时停靠的位置。 属性值:用于指定窗口回弹的位置,可取百分比,如"5%";像素值,如"100px";自动计算值,如"auto",默认为可拖拽的范围值的一半;

    • slideoffset: (JSON 类型 )Webview窗口侧滑时停靠的位置

      开启窗口回弹效果后,当窗口中展现的内容滚动到头(左侧或右侧)时,在拖拽时窗口整体内容将跟随移动,松开后自动停靠的侧滑位置,并触发"slideBounce"事件。 支持以下属性: left:表示窗口左侧侧滑的位置; right:表示窗口右侧侧滑的位置。 属性值:用于指定滑动后停靠的距离,可取百分比(left/right相对于窗口的宽度,top/bottom相对于窗口的高度),如"30%";像素值,如"100px";自动计算值,为可拖拽范围,如"auto"。

    • offset: (JSON 类型 )Webview窗口拖拽偏移的位置

      开启窗口回弹效果后,可以通过此属性值来主动设置拖拽的偏移位置,与手动操作拖拽至此偏移位置松开后的逻辑一致。 支持以下属性: top:表示窗口顶部偏移的位置; left:表示窗口左侧偏移的位置; right:表示窗口右侧偏移的位置; bottom:表示窗口底部偏移的位置。 属性值:用于指定偏移的位置,可取百分比,如"5%";像素值,如"100px";有效值范围为0到position属性定义的位置。

    • preventTouchEvent: (Boolean 类型 )Webview窗口是否阻止touch事件传递给DOM元素

      设置为true表示阻止touch事件,设置为false表示不阻止touch事件。当开启侧滑功能(左侧滑和右侧滑)时默认值为true,否则为false。

      平台支持

      • Android - 2.3+ (支持): 由于Touch事件存在冲突,如果Webview使用侧滑功能,需要将Webview设置为阻止touch事件传递才能触发。 当html页面内容需要处理横向滚动时并且也需要侧滑效果时,需初始化时设置不阻止touch事件传递:webview.setBounce({position:{left:'100px'},solideoffset:{left:'auto'},preventTouchEvent:false});。当操作非横向滚动元素时及时动态设置阻止touch事件传递以触发侧滑效果:webview.setBounce({preventTouchEvent:true});。
      • iOS - 5.1+ (不支持): Touch事件不存在冲突,不支持此功能。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 重置窗口回弹位置
    function resetBounce(){
    	ws.resetBounce();
    }
    	</script>
    	</head>
    	<body style="text-align:center;">
    		<br/><br/><br/>
    		设置Webview窗口的回弹效果<br/>
    		回弹后显示停靠到44px的位置<br/><br/>
    		<button onclick="resetBounce()">重置回弹位置</button>
    		<br/><br/><br/>
    		*暂仅支持顶部的回弹效果*
    	</body>
    </html>
    				

    WebviewContentAnimationOptions

    Webview窗口内容动画参数

    
    interface WebviewAnimationOptions {
    	attribute String type;
    	attribute Number duration;
    	attribute Number frames;
    	attribute Rect region;
    }				

    说明:

    指定动画的类型、持续时间等信息。

    属性:

    • type: (String 类型 )动画类型

      可取值:"shrink" - 从上到下分块收缩清除窗口动画。

    • duration: (Number 类型 )动画持续时间

      单位为毫秒,默认值为200ms。

    • frames: (Number 类型 )动画帧数

      必须为大于0的整数,默认值为12。

    • region: (json 类型 )动画作用区域

      支持以下属性: top - 区域距离控件顶部的偏移量,属性值可取像素值(如"100px"),百分比(如"10%",相对于控件的高度),默认值为'0px'; bottom - 区域距离控件底部的偏移量,属性值可取像素值(如"100px"),百分比(如"10%",相对于控件的高度),默认值为'0px'; left - 区域距离控件左侧的偏移量,属性值可取像素值(如"100px"),百分比(如"10%",相对于控件的宽度),默认值为'0px'; right - 区域距离控件右侧的偏移量,属性值可取像素值(如"100px"),百分比(如"10%",相对于控件的宽度),默认值为'0px'。 如“{top:'44px',bottom:'48px'}”。

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<title>Webview Example</title>
    		<script type="text/javascript">
    var wv=null;
    // H5 plus事件处理
    function plusReady(){
    	wv = plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // Webview窗口动画 
    function animateWebview(){
    	wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){
    		wv.restore();	// 内容动画结束后可调用此动画恢复显示内容
    	});
    }
    		</script>
    	</head>
    	<body>
    		Webview窗口内容动画<br/>
    		<button onclick="animateWebview()">内容动画</button><br/>
    	</body>
    </html>
    			

    WebviewDock

    原生控件在窗口中停靠的方式

    常量:

    • "top": (String 类型 )控件停靠则页面顶部
    • "bottom": (String 类型 )控件停靠在页面底部
    • "right": (String 类型 )控件停靠在页面右侧
    • "left": (String 类型 )控件停靠在页面左侧

    WebviewDragEvent

    Webview窗口滑动事件数据

    属性:

    • direction: (String 类型 )手势类型

      可取值: "rtl" - 从右向左滑动手势; "left" - 向左滑动手势,与rtl一致; "ltr" - 从左向右滑动手势; "right" - 向右滑动手势,与ltr一致。

    • type: (String 类型 )窗口滑动类型

      可取值: "start" - 表示开始滑动操作; "move" - 表示正在滑动; "end" - 表示滑动操作结束。

    • result: (String 类型 )窗口滑动结果

      可取值: "true" - 表示滑动操作成功; "false" - 表示滑动操作失败(恢复到滑动前的状态); "undefined" - 无状态值(当type值为"end"时返回此值)。

    • id: (String 类型 )当前操作窗口标识

      当type值为"start"/"move"时,保存当前操作窗口(或View控件)的标识; 当type值为"end"时保存滑动操作后显示窗口(或View控件)的标识(即result值为"true"则认为关联窗口显示,result值为false则认为主窗口显示)。

    • otherId: (String 类型 )关联窗口标识

      滑动操作关联窗口(或View控件)的标识。

    • targetId: (String 类型 )主窗口标识

      滑动操作主窗口(或View控件)的标识。

    • progress: (Number 类型 )滑动进度

      滑动进度位置信息,取值范围为0-100,如20表示滑动了总距离的20%: 当type值为"start"时progress值为0; 当type值为"end"时如果result为true则progress值为0,如果result为false则progress值为100; 当type值为"move"时,保存当前滑动的进度信息(注:多次触发move事件)。

    WebviewDragOptions

    窗口手势操作参数

    属性:

    • callbackStep: (Number 类型 )滑屏操作回调事件触发步长

      用于设置滑屏回调事件触发频率,取值范围为1-100,值越小触发频率越高,值越大触发频率越小,默认值为20。 如设置值为20,则表示滑屏操作移动距离超过可移动范围的20%则触发一次回调事件,可通过回调函数参数(WebviewDragEvent)的progress属性获取。 注意:触发频率过大会影响效率,开发者需谨慎设置此值。

    • direction: (String 类型 )设置的手势类型

      可取值: 可取值: "rtl" - 从右向左滑动手势; "left" - 向左滑动手势,与rtl一致; "ltr" - 从左向右滑动手势; "right" - 向右滑动手势,与ltr一致。

    • moveMode: (String 类型 )滑动手势模式

      可取值: "followFinger" - 当前Webview窗口跟随手指滑动; "silent" - 当前Webview窗口不跟随手指滑动; "bounce" - 当前Webview窗口自动回弹(松手后窗口恢复到拖动前的位置),通常可通过设置此模式来实现Tab项无法继续滑动切换自动回弹效果。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,wn=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 预创建新窗口(显示在可视区域外)
    	wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag', {left:'100%'});
    	wn.show('none');
    	// 左滑显示新窗口
    	ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){
    		console.log('Left drag event: '+JSON.stringify(e));
    	});
    	// 右滑隐藏新窗口
    	wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
    		console.log('Right drag event: '+JSON.stringify(e));
    	});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		左滑可打开新页面
    	</body>
    </html>
    				

    WebviewDragOtherViewOptions

    手势操作关联对象参数

    属性:

    • view: (String 类型 )手势关联对象

      可取值Webview窗口的id(String类型)、Webview窗口对象、原生View窗口对象(plus.nativeObj.View)。

    • moveMode: (String 类型 )滑动模式

      可取值: "follow" - 同步跟随主Webview窗口滑动; "silent" - 不跟随主Webview窗口滑动。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,wn=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 预创建新窗口(显示在可视区域外)
    	wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag', {left:'100%'});
    	wn.show('none');
    	// 左滑显示新窗口
    	ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){
    		console.log('Left drag event: '+JSON.stringify(e));
    	});
    	// 右滑隐藏新窗口
    	wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
    		console.log('Right drag event: '+JSON.stringify(e));
    	});
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    	</script>
    	</head>
    	<body>
    		左滑可打开新页面
    	</body>
    </html>
    				

    WebviewDrawOptions

    截屏绘制操作参数

    属性:

    • bit: (String 类型 )截屏图片的位深

      可取值: "RGB565" - RGB565彩色模式,一个像素占两个字节; "ARGB" - ARGB彩色模式,保存透明度信息。

      平台支持

      • Android - ALL (支持): 默认使用"RGB565"模式。 注意:"ARGB"模式在Android4.4之前一个像素占用两个字节,在Android4.4之后一个像素占用4个字节。由于占用内存较大,开发者需谨慎使用。
      • iOS - ALL (不支持): 忽略此属性,使用"ARGB"模式(一个像素占用4个字节)。
    • check: (Boolean 类型 )是否检测截屏图片是否为空白

      可取值: true - 表示检测到截屏到空白图片时认为操作失败(触发错误回调函数); false - 表示不检测,即使为空白图片仍然返回成功。 默认值为false。

    • clip: (plus.nativeObj 类型 )设置截屏区域

      相对于Webview窗口的区域信息,默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。

    • checkKeyboard: (Boolean 类型 )是否检测当前是否弹出软键盘

      可取值: true - 表示检测到弹出软键盘是认为截屏操作失败(触发错误回调函数); false - 表示不检测软键盘状态,直接截屏。 默认值为false。

      平台支持

      • Android - ALL (支持): 当弹出软键盘时,Webview窗口大小会调整(保证编辑区域可视)。 此时截屏获取的图片为调整后的窗口大小。
      • iOS - ALL (不支持): 忽略此属性,软键盘弹出时Webview窗口大小不会调整,仍然截屏全屏。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 截屏绘制
    var bitmap=null;
    function captureWebview() {
    	bitmap = new plus.nativeObj.Bitmap('test');
    	// 将webview内容绘制到Bitmap对象中
    	ws.draw(bitmap,function(){
    		console.log('截屏绘制图片成功');
    	},function(e){
    		console.log('截屏绘制图片失败:'+JSON.stringify(e));
    	},{check:true,	// 设置为检测白屏
    		clip:{top:'50%',left:'0px',height:'50%',width:'100%'}	// 设置截屏区域
    	});
    }
    	</script>
    	</head>
    	<body>
    		截屏绘制Webview窗口<br/>
    		<button onclick="captureWebview()">Draw</button>
    	</body>
    </html>
    				

    WebviewFavoriteOptions

    窗口收藏参数

    说明:

    在流应用环境中调用收藏功能时使用的参数。

    属性:

    • icon: (String 类型 )收藏时显示的图标

      在收藏列表中显示的图标,默认使用应用图标。

    • title: (String 类型 )收藏时显示的标题

      在收藏列表中显示的标题字符串。

    • href: (String 类型 )收藏的页面地址

      必须是网络地址。

    WebviewLoadDataOptions

    创建加载HTML数据参数

    属性:

    • baseURL: (String 类型 )页面的Base URL
    • mimeType: (String 类型 )HTML数据的数据类型

      默认值为"text/html"。

    • encoding: (String 类型 )HTML数据的编码类型

      默认值为"utf-8"。

    WebviewShareOptions

    窗口的分享参数

    说明:

    在流应用环境中调用分享功能时使用的参数。

    属性:

    • icon: (String 类型 )分享时使用的图标

      默认使用应用图标。

    • title: (String 类型 )分享时使用的标题
    • href: (String 类型 )分享时使用的链接地址

      必须是网络地址。

    WebviewSubNViewStyles

    窗口原生子View控件样式

    说明:

    可设置原生控件的标识、大小、位置以及绘制的内容等。

    属性:

    • id: (String 类型 )原生子View控件的标识

      可通过plus.nativeObj.View.getViewById(id)方法传入此标识来获取子View控件对象。

    • type: (String 类型 )原生子View控件类型

      可取值: "NView" - 原生子View控件(plus.nativeObj.NView); "ImageSlider" - 原生图片轮播控件(plus.nativeObj.ImageSlider)。 默认值为"NView"。

    • styles: (ViewStyles 类型 )原生子View控件的样式

      可设置原生控件的位置、大小等信息。

    • tags: (Array[ ViewDrawTagStyles ] 类型 )原生子View控件初始绘制内容

      可设置绘制图片、矩形区域、文本等内容。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	plus.key.addEventListener('backbutton', function(){
    		nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    	}, false);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    var nw=null;
    // 创建带原生子View控件的Webview窗口 
    function createWebview(){
    	nw=nw||plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',subNViews:[{
    		id:'subnview1',
    		styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},
    		tags:[{tag:'font',id:'font',text:'原生子View控件',textStyles:{size:'18px'}}]
    	}]});
    	nw.addEventListener('close', function(){
    		nw=null;
    	}, false);
    	nw.show('pop-in');
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口的子View控件<br/>
    		<button onclick="createWebview()">Create</button>
    	</body>
    </html>
    				

    WebviewTitleNViewStyles

    窗口标题栏控件样式

    说明:

    标题栏控件固定高度为44px,可通过Webview窗口对象的getTitleNView方法获取标题栏原生控件对象动态绘制内容。 可以通过WebviewObject对象的getTitleNView()获取标题栏的NView对象,然后调用其setStyle方法更新样式。

    属性:

    • autoBackButton: (Boolean 类型 )标题栏控件是否显示左侧返回按钮

      可取值: "true" - 显示返回按钮; "false" - 不显示返回按钮。 默认值为"false"。 返回按钮的颜色为窗口标题文字颜色,按下时颜色自动调整透明度为0.3。 点击返回按钮的逻辑与按下系统返回键逻辑一致。

    • backgroundColor: (String 类型 )标题栏控件的背景颜色

      颜色值格式为"#RRGGBB",如"#FF0000"表示为红色背景,默认值为"#F7F7F7"。

    • buttons: (Array[ WebviewTitleNViewButtonStyles ] 类型 )标题栏上的自定义按钮

      创建的自定义按钮数目不限制,实际应用中建议最多设置4个按钮(包括左侧返回按钮)。 注意:此属性不支持动态修改,仅在创建titleNView时设置有效。

    • coverage: (String 类型 )标题栏控件变化作用范围

      仅在type值为transparent时有效,页面滚动时标题栏背景透明度将发生变化。 当页面滚动到指定偏移量时标题栏背景变为完全不透明。 支持百分比、像素值,默认为'132px'。

    • homeButton: (Boolean 类型 )标题栏控件是否显示Home按钮

      可取值: "true" - 显示Home按钮; "false" - 不显示Home按钮。 默认值为"false"。 Home按钮的颜色为窗口标题文字颜色,按下时颜色自动调整透明度为0.3。 点击Home按钮的逻辑为关闭所有非首页窗口,显示首页窗口。

    • progress: (WebviewProgressStyles 类型 )标题栏控件的进度条样式

      设置此属性则在标题栏控件的底部显示进度条,可配置进度条颜色值即高度。 设置此属性值为undefined或null则隐藏进度条。 默认不显示底部进度条。

    • splitLine: (WebviewSplitLineStyles 类型 )标题栏控件的底部分割线

      设置此属性则在标题栏控件的底部显示分割线,可配置颜色值及高度。 设置此属性值为undefined或null则隐藏分割线。 默认不显示底部分割线。

    • tags: (Array[ ViewDrawTagStyles ] 类型 )标题栏上初始自定义绘制内容

      可用于设置自定义绘制图片、矩形区域、文本等内容。 注意:此属性不支持动态修改,仅在创建titleNView时设置有效,如果需要更新绘制内容可根据tags的id调用draw方法操作。

    • titleColor: (String 类型 )标题栏控件的标题文字颜色

      颜色值格式为"#RRGGBB",如"#FF0000"表示标题文字颜色为红色,默认值为"#000000"。

    • titleOverflow: (String 类型 )标题栏控件的标题文字超出显示区域时处理方式

      可取值: "clip" - 超出显示区域时内容裁剪; "ellipsis" - 超出显示区域时尾部显示省略标记(...)。 默认值为"ellipsis"。

    • titleText: (String 类型 )标题栏控件的标题文字内容

      在标题栏控件居中(水平和垂直)显示,左右边距为88px,如果文本过长则尾部裁剪(加三个点"...")显示。 当不设置titleText属性或属性值为undefined/null时,使用当前Webview窗口加载页面的标题,并自动同步更新页面的标题。

    • titleSize: (String 类型 )标题栏控件的标题文字字体大小

      字体大小单位为像素,如"20px"表示字体大小为20像素,默认值为17像素。

    • type: (String 类型 )标题栏控件样式

      可取值: "default" - 默认样式,顶部停靠显示,挤压Webview页面内容显示区域; "transparent" - 透明样式,顶部沉浸式显示覆盖Webview页面内容,标题栏上内容(除按钮外)全部透明,当页面滚动时透明度逐渐变化,直到不透明显示。 默认值为"default"。 注意:此属性不支持动态更新。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 带标题栏控件的Webview窗口
    var webview = null;
    function titleNViewWebview() {
    	webview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {'titleNView':{'backgroundColor':'#D74B28','titleText':'标题栏文字','titleColor':'#CCCCCC',autoBackButton:true}});
    	webview.addEventListener('close', function(){
    		webview=null;
    	});
    	webview.addEventListener('titleUpdate', function(){
    		webview.show();
    	});
    }
    	</script>
    	</head>
    	<body>
    		带标题栏Webview窗口<br/>
    		<button onclick="titleNViewWebview()">打开</button>
    	</body>
    </html>
    				

    WebviewTitleNViewButtonStyles

    窗口标题栏自定义按钮样式

    属性:

    • type: (String 类型 )按钮样式

      运行环境中内置按钮样式直接使用,内置样式忽略fontSrc和text属性。 可取值: "forward" - 前进按钮; "back" - 后退按钮; "share" - 分享按钮; "favorite" - 收藏按钮; "home" - 主页按钮; "menu" - 菜单按钮; "close" - 关闭按钮; "none" - 无样式。 默认值为无样式("none"),需通过text属性设置按钮上显示的内容、通过fontSrc属性设置使用的字体库。

    • color: (String 类型 )按钮上文字颜色

      可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色返回键; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为窗口标题栏控件的标题文字颜色。

    • colorPressed: (String 类型 )按下状态按钮文字颜色

      可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色返回键; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为color属性值自动调整透明度为0.3。

    • float: (String 类型 )按钮在标题栏上的显示位置

      可取值: "right" - 在标题栏中靠右排列显示; "left" - 在标题栏中靠左侧排列显示(在返回键后)。 默认值为"right"。

    • fontWeight: (String 类型 )按钮上文字的粗细

      可取值: "normal" - 标准字体; "bold" - 加粗字体。 默认值为"normal"。

    • fontSize: (String 类型 )按钮上文字大小

      可取值:字体高度像素值,数字加"px"格式字符串,如"22px"。 窗口标题栏为透明样式(type="transparent")时,默认值为"22px"; 窗口标题栏为默认样式(type="default")时,默认值为"27px"。

    • fontSrc: (String 类型 )按钮上文字使用的字体文件路径

      字体文件路径支持以下类型: 相对路径 - 相对于当前页面的host位置,如"a.ttf",注意当前页面为网络地址则不支持; 绝对路径 - 系统绝对路径,如Android平台"/sdcard/a.ttf",此类路径通常通过其它5+ API获取的; 扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径,如"_www/a.ttf"; 本地路径URL - 以“file://”开头,后面跟随系统绝对路径。

    • onclick: (WebviewCustomButtonCallback 类型 )按钮点击后触发的回调函数

      回调函数中将返回此JSON对象。

    • text: (String 类型 )按钮上显示的文字

      推荐使用一个字符,超过一个字符可能无法正常显示,使用字体图标时unicode字符表示必须'\u'开头,如"\ue123"(注意不能写成"\e123")。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 点击自定义按钮回调函数
    function clickButton(){
    	plus.nativeUI.alert('clicked!');
    }
    // 标题栏控件显示自定义按钮
    var webview = null;
    function titleNViewWebview() {
    	webview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', 
    		{'titleNView':{style:'transparent',backgroundColor':'#D74B28','titleText':'标题栏文字','titleColor':'#CCCCCC',autoBackButton:true,
    			buttons:[{text:'...',float:'right',onclick:clickButton}]
    		}});
    	webview.addEventListener('close', function(){
    		webview=null;
    	});
    	webview.addEventListener('titleUpdate', function(){
    		webview.show();
    	});
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口标题栏显示自定义按钮<br/>
    		<button onclick="titleNViewWebview()">打开</button>
    	</body>
    </html>
    				

    WebviewProgressStyles

    标题栏控件的进度条样式

    说明:

    显示在标题栏控件底部。

    属性:

    • color: (String 类型 )进度条颜色

      可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为"#00FF00"。

    • height: (String 类型 )进度条高度

      可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度。 默认值为"2px"。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	plus.key.addEventListener('backbutton', function(){
    		nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    	}, false);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    var nw=null;
    // 创建带标题栏的Webview窗口 
    function createWebview(){
    	nw||nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',titleNView:{backgroundColor:'#00FF00',progress:{color:'#0000FF'}}}),
    	nw.addEventListener('close', function(){
    		nw=null;
    	}, false);
    	nw.show('pop-in');
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口的标题栏上显示进度条<br/>
    		<button onclick="createWebview()">打开</button>
    	</body>
    </html>
    				

    WebviewSplitLineStyles

    窗口标题栏控件的分割线样式

    说明:

    显示在标题栏控件底部。

    属性:

    • color: (String 类型 )底部分割线颜色

      可取值: "#RRGGBB"格式字符串,如"#FF0000"表示绘制红色分割线; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为"#CCCCCC"。

    • height: (String 类型 )底部分割线高度

      可取值:像素值(逻辑像素),支持小数点,如"1px"表示1像素高;百分比,如"1%",相对于标题栏控件的高度。 默认值为"1px"。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    	plus.key.addEventListener('backbutton', function(){
    		nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    	}, false);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    var nw=null;
    // 创建带标题栏的Webview窗口 
    function createWebview(){
    	nw||nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',titleNView:{backgroundColor:'#00FF00',splitLine:{color:'#0000FF'}}}),
    	nw.addEventListener('close', function(){
    		nw=null;
    	}, false);
    	nw.show('pop-in');
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口的标题栏上显示分割线<br/>
    		<button onclick="createWebview()">打开</button>
    	</body>
    </html>
    				

    WebviewEvent

    Webview窗口事件

    常量:

    • "close": (String 类型 )Webview窗口关闭事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口关闭时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 监听Webview窗口关闭事件
      function eventTest(){
      	if(nw){return;}
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860', {top:'46px',bottom:'0px'});
      	nw.addEventListener('close', function(e){
      		console.log('Webview closed!');
      		nw=null;
      	}, false );
      	nw.show(); // 显示窗口
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口关闭事件
      		<button onclick="eventTest()">start</button>
      		<button onclick="nw.close()">close</button>
      	</body>
      </html>
      						
    • "dragBounce": (String 类型 )Webview窗口回弹事件

      通过WebviewObject对象的setBounce方法开启回弹效果设置顶部下拉回弹changeoffset属性后,当用户向下拖拽窗口时触发发此事件,回调函数类型为BounceEventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var ws=null;
      // H5 plus事件处理
      function plusReady(){
      	ws=plus.webview.currentWebview();
      	ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
      	ws.addEventListener('dragBounce', onPullStateChange, false);
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      // 下拉状态改变
      function onPullStateChange(e){
      	switch(e.status){
      		case 'beforeChangeOffset':
      		console.log('顶部回弹:可继续往下拖拽');
      		break;
      		case 'afterChangeOffset':
      		console.log('顶部回弹:松开会重置回弹位置');
      		break;
      		case 'dragEndAfterChangeOffset':
      		console.log('顶部回弹:松开停靠回弹');
      		break;
      		default:
      		break;
      	}
      }
      // 重置窗口回弹位置
      function resetBounce(){
      	ws.resetBounce();
      }
      	</script>
      	</head>
      	<body style="text-align:center;">
      		<br/><br/><br/>
      		设置Webview窗口的回弹效果<br/>
      		回弹后显示停靠到44px的位置<br/><br/>
      		<button onclick="resetBounce()">重置回弹位置</button>
      		<br/><br/><br/>
      		*暂仅支持顶部的回弹效果*
      	</body>
      </html>
      						
    • "slideBounce": (String 类型 )Webview窗口回弹事件

      通过WebviewObject对象的setBounce方法开启回弹效果设置左右侧侧滑slideoffset属性后,当用户向左右侧拖拽窗口侧滑时触发发此事件,回调函数类型为BounceEventCallback。

    • "error": (String 类型 )Webview窗口加载错误事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载错误时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 监听Webview窗口加载错误事件
      function eventTest() {
      	// 打开新窗口
      	nw=plus.webview.create('', {top:'46px',bottom:'0px});
      	nw.addEventListener('error', function(e){
      		console.log('Error: '+nw.getURL());
      	}, false);
      	nw.show(); // 显示窗口
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口加载错误事件
      		<button onclick="eventTest()">start</button>
      		<button onclick="nw.loadURL('http://bucunzaideyuming.abcdeg')">error</button>
      	</body>
      </html>
      						
    • "hide": (String 类型 )Webview窗口隐藏事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口隐藏(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      	createWebview();
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建Webview窗口监听show、hide事件
      function createWebview(){
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860', {top:'46px',bottom:'0px'});
      	nw.addEventListener('show', function(e){
      		console.log('Webview Showed');
      	}, false);
      	nw.addEventListener('hide', function(e){
      		console.log('Webview Hided');
      	}, false);
      }
      // 显示Webview窗口
      function showWebview(){
      	nw.show('slide-in-right');
      }
      // 隐藏Webview窗口
      function hideWebview(){
      	nw.hide();
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口显示隐藏事件
      		<button onclick="showWebview()">Show</button>
      		<button onclick="hideWebview()">Hide</button>
      	</body>
      </html>
      						
    • "loading": (String 类型 )Webview窗口页面开始加载事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口开始加载新页面时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 监听Webview窗口页面开始加载事件
      function eventTest() {
      	// 打开新窗口
      	nw=plus.webview.create('', {top:'46px',bottom:'0px'});
      	nw.addEventListener('loading', function(e){
      		console.log('Loading: '+nw.getURL());
      	}, false);
      	nw.show(); // 显示窗口
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口页面开始加载事件
      		<button onclick="eventTest()">start</button>
      		<button onclick="nw.loadURL('http://m.weibo.cn/u/3196963860')">loading</button>
      	</body>
      </html>
      						
    • "loaded": (String 类型 )Webview窗口页面加载完成事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口页面加载完成时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 监听Webview窗口页面加载完成事件
      function eventTest() {
      	// 打开新窗口
      	nw=plus.webview.create('', '', {top:'46px',bottom:'0px'} );
      	nw.addEventListener('loaded', function(e){
      		console.log('Loaded: '+nw.getURL());
      	}, false);
      	nw.show(); // 显示窗口
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口页面加载完成事件
      		<button onclick="eventTest()">start</button>
      		<button onclick="nw.loadURL('http://m.weibo.cn/u/3196963860')">loaded</button>
      	</body>
      </html>
      						
    • "maskClick": (String 类型 )Webview窗口显示遮罩层时点击事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var ws=null;
      // H5 plus事件处理
      function plusReady(){
      	ws=plus.webview.currentWebview();
      	// 显示遮罩层
      	ws.setStyle({mask:'rgba(0,0,0,0.5)'});
      	// 点击关闭遮罩层
      	ws.addEventListener('maskClick', function(){
      		ws.setStyle({mask:'none'});
      	},false);
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口页面加载完成事件
      		<br/>
      		点击窗口关闭遮罩层
      	</body>
      </html>
      						
    • "rendering": (String 类型 )Webview窗口开始渲染事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口开始渲染内容时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建Webview窗口监听rendering事件
      function createWebview(){
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
      	nw.addEventListener('rendering', function(e){
      		console.log('Webview rendering');
      	}, false);
      	nw.show();
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口渲染事件
      		<button onclick="createWebview()">Show</button>
      	</body>
      </html>
      						
    • "rendered": (String 类型 )Webview窗口渲染完成事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口渲染完成时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建Webview窗口监听rendering事件
      function createWebview(){
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
      	nw.addEventListener('rendered', function(e){
      		console.log('Webview rendered');
      	}, false);
      	nw.show();
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口渲染完成事件
      		<button onclick="createWebview()">Show</button>
      	</body>
      </html>
      						
    • "show": (String 类型 )Webview窗口显示事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口显示(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      	createWebview();
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建Webview窗口监听show、hide事件
      function createWebview(){
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
      	nw.addEventListener('show', function(e){
      		console.log('Webview Showed');
      	}, false);
      	nw.addEventListener('hide', function(e){
      		console.log('Webview Hided');
      	}, false);
      }
      // 显示Webview窗口
      function showWebview(){
      	nw.show('slide-in-right');
      }
      // 隐藏Webview窗口
      function hideWebview(){
      	nw.hide();
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口显示隐藏事件
      		<button onclick="showWebview()">Show</button>
      		<button onclick="hideWebview()">Hide</button>
      	</body>
      </html>
      						
    • "titleUpdate": (String 类型 )Webview加载页面标题更新事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载新页面更新标题时触发此事件,回调函数类型为SuccessCallback。 注意:此事件会先于loaded事件触发,通常在加载网络页面时通过此事件可更快获取到页面的标题。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 5.1+ (支持)
      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建Webview窗口监听侧滑返回事件
      function createWebview(){
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860/', '', {top:'100px',bottom:'0px'});
      	nw.addEventListener('titleUpdate', function(e){
      		console.log('Update title: '+e.title);
      	}, false);
      	plus.webview.currentWebview().append(nw);
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口标题更新事件
      		<button onclick="createWebview()">创建窗口监听标题更新事件</button>
      	</body>
      </html>
      						
    • "touchstart": (String 类型 )Webview窗口接收到触屏事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当用户操作按下到Webview窗口时触发此事件,回调函数类型为SuccessCallback。 注意:每按下屏幕触发一次此事件。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 5.1+ (不支持)
      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建Webview窗口监听触屏事件
      function createWebview(){
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860/', '', {top:'100px',bottom:'0px'});
      	nw.addEventListener('touchstart', function(e){
      		console.log('touchstart');
      	}, false );
      	plus.webview.currentWebview().append(nw);
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口触屏事件<br/>
      		<button onclick="createWebview()">创建窗口并监听触屏事件</button>
      	</body>
      </html>
      						
    • "popGesture": (String 类型 )Webview窗口侧滑返回事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口侧滑返回时触发此事件,回调函数类型为PopGestureCallback。

      平台支持

      • Android - 2.2+ (支持): 仅在流应用环境中支持此事件;在5+应用中不支持侧滑返回功能,因此不会触发此事件。
      • iOS - ALL (支持): Webview设置侧滑返回功能才能触发此事件。
      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var nw=null;
      // H5 plus事件处理
      function plusReady(){
      	createWebview();
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建Webview窗口监听侧滑返回事件
      function createWebview(){
      	// 打开新窗口
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'100px',bottom:'0px',popGesture:'hide'} );
      	nw.addEventListener('popGesture', function(e){
      		poplog.innerText='popGesture: '+e.type+','+e.result+','+e.progress;
      	}, false);
      }
      // 显示Webview窗口
      function showWebview(){
      	nw.show('slide-in-right');
      }
      // 隐藏Webview窗口
      function hideWebview(){
      	nw.hide();
      }
      // 关闭窗口
      function closeWebview(){
      	nw.close();
      	plus.webview.currentWebview().close();
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口侧滑返回事件
      		<button onclick="closeWebview()">Close</button>
      		<button onclick="showWebview()">Show</button>
      		<button onclick="hideWebview()">Hide</button>
      		<div id="poplog"></div>
      	</body>
      </html>
      						
    • "progressChanged": (String 类型 )Webview窗口加载进度变化事件

      通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载页面进度变化时触发此事件。 回调函数原型为void PorgressCandedCallback(Event e),可通过e.progress获取窗口加载进度,取值范围为0-100。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      // H5 plus事件处理
      function plusReady(){
      	createWebview();
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready',plusReady,false);
      }
      var nw=null;
      // 创建Webview窗口监听加载进度事件
      function createWebview(){
      	nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {top:'100px', bottom:'0px'});
      	nw.addEventListener('progressChanged', function(e){
      		// e.progress可获取加载进度
      		outlog.innerText='Progress Changed: '+e.progress+'%';
      		console.log('Progress Changed: '+JSON.stringify(e));
      	}, false);
      	nw.show();
      }
      // 刷新Webview窗口
      function reloadWebview(){
      	nw&&nw.reload();
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口加载进度变化事件<br/>
      		<button onclick="createWebview()">Create</button><button onclick="reloadWebview()">Refresh</button><br/>
      		<div id="outlog"></div>
      	</body>
      </html>
      						
    • "pullToRefresh": (String 类型 )Webview窗口下拉刷新事件

      Webview窗口打开下拉刷新功能后,用户操作下拉刷新时或调用beginPullToRefresh方法时触发,用于通知业务逻辑可以开始执行刷新操作。 更新操作完成后调用窗口的endPullToRefresh方法结束下拉刷新。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      // H5 plus事件处理
      function plusReady(){
      	var cw=plus.webview.currentWebview();
      	cw.setStyle({	// 开启下拉刷新功能
      		pullToRefresh:{
      			support:true
      		}
      	});
      	cw.addEventListener('pullToRefresh', function(){	// 监听下拉刷新
      		// 这里可执行从服务器获取数据刷新业务逻辑
      		setTimeout(function(){	// 完成刷新逻辑后调用endPullToRefresh退出刷新状态
      			plus.nativeUI.toast('更新完成!');
      			cw.endPullToRefresh();
      		}, 5000);
      	}, false);
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready',plusReady,false);
      }
      // 直接进入刷新状态(无需用户下拉操作触发)
      function autoRefresh(){
      	plus.webview.currentWebview().beginPullToRefresh();
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口下拉刷新<br/>
      		下拉窗口可触发刷新<br/>
      		<button onclick="autoRefresh()">直接进入刷新状态</button>
      		<div id="outlog"></div>
      	</body>
      </html>
      						

    WebviewExtraOptions

    JSON对象,原生窗口扩展参数

    属性:

    • acceleration: (String 类型 )窗口动画加速

      开启窗口动画加速功能可优化窗口动画效果,提升动画流程度,可避免部分设备上打开(关闭)窗口闪屏的问题。 可取值: "auto" - 自动优化窗口动画; "none" - 关闭窗口动画加速功能; "capture" - 使用截屏方式加速窗口动画。 默认值为"auto"。

      平台支持

      • Android - 2.3+ (支持): 设置为"auto"值时:pop-in/pop-out动画(Android5.0及以上不使用截屏加速,Android5.0以下如果Webview中存在subNView则pop-in动画默认不使用截图加速,pop-out动画默认使用截图加速,如果Webview中不存在subNView则默认不使用截图加速), slide-*/zoom-*动画(不使用截屏加速),fade-in/fade-out动画(默认使用截屏加速); 设置为"none"值时:所有动画类型都不使用截屏加速; 设置为"capture"值时:除了"none"动画类型不使用截屏加速外其它所有动画都强制使用截屏加速。
      • iOS - 5.1+ (不支持): 暂不支持,忽略此参数。
    • capture: (Bitmap 类型 )窗口动画加速时使用的图片

      当使用截屏方式加速窗口动画时,可设置已经创建好的截屏图片,此时不会进行实时截屏操作,加速窗口动画响应时间,提升用户体验。 如果未指定截屏图片,则实时截取当前Webview窗口对象的图片进行动画操作。 如果窗口未使用截屏方式加速动画,则忽略此参数。

      平台支持

      • Android - 2.3+ (支持)
      • iOS - 5.1+ (不支持): 暂不支持,忽略此参数。
    • otherCapture: (Bitmap 类型 )关联窗口动画使用的图片

      当使用截屏方式加速窗口动画时,可设置已经创建好的截屏图片,此时不会进行实时截屏操作,加速关联窗口动画响应时间,提升用户体验。 如果未指定截屏图片,则实时截取关联Webview窗口对象的图片进行动画操作。 如果窗口未使用截屏方式加速动画,则忽略此参数。

      平台支持

      • Android - 2.3+ (支持): 仅"pop-in"、"pop-out"窗口动画效果支持此参数,其它窗口动画忽略此参数。
      • iOS - 5.1+ (不支持): 暂不支持,忽略此参数。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var ws=null,wn=null;
    var bitmap1=null,bitmap2=null;
    // H5 plus事件处理
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	// 截图
    	bitmap1 = new plus.nativeObj.Bitmap();
    	// 将webview内容绘制到Bitmap对象中
    	ws.draw(bitmap1,function(){
    		console.log('bitmap1绘制图片成功');
    	},function(e){
    		console.log('bitmap1绘制图片失败:'+JSON.stringify(e));
    	});
    	// 预创建新Webview窗口
    	wn=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	wn.addEventListener('loaded', function(){
    		bitmap2 = new plus.nativeObj.Bitmap();
    		wn.draw(bitmap2, function(){
    			console.log('bitmap2截图成功');
    		}, function(e){
    			console.log('bitmap2截图失败:'+JSON.stringify(e));
    		});
    	},false);
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // 创建并显示Webview窗口
    function showWebview(){
    	wn.show('pop-in', 300, function(){
    		// 动画完成,销毁截图
    		bitmap1.clear();
    		bitmap2.clear();
    	}, {capture:bitmap2,otherCapture:bitmap1});
    }
    	</script>
    	</head>
    	<body>
    		使用截图显示Webview窗口<br/>
    		<button onclick="showWebview()">show</button>
    	</body>
    </html>
    				

    WebviewPosition

    原生控件在窗口中显示的位置

    常量:

    • "static": (String 类型 )控件在页面中正常定位,如果页面存在滚动条则随窗口内容滚动
    • "absolute": (String 类型 )控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动
    • "dock": (String 类型 )控件在页面中停靠,停靠的位置通过dock属性进行定义

    WebviewPullToRefreshStyles

    Webview窗口下拉刷新样式

    属性:

    • support: (Boolean 类型 )是否开启Webview窗口的下拉刷新功能

      true表示开启窗口的下拉刷新功能; false表示关闭窗口的下拉刷新功能。

    • color: (String 类型 )下拉刷新控件颜色

      颜色值格式为"#RRGGBB",如"#FF0000"为设置下拉属性控件为红色,默认值为"#2BD009"。

      平台支持

      • Android - ALL (支持): 仅"circle"样式支持此属性,配置下拉控件的颜色。
      • iOS - ALL (支持): "default"样式配置雪花及文字颜色; "circle"样式配置下拉控件的颜色。
    • style: (String 类型 )下拉刷新样式

      用于定义下拉刷新风格样式,可取值: "default" - 经典下拉刷新样式(下拉拖动时页面内容跟随); "circle" - 圆圈样式下拉刷新控件样式(下拉拖动时仅刷新控件跟随)。 默认值为"default"。

    • height: (String 类型 )窗口的下拉刷新控件进入刷新状态的拉拽高度

      支持百分比,如"10%";像素值,如"50px"。

    • range: (String 类型 )窗口可下拉拖拽的范围

      支持百分比,如"10%";像素值,如"50px"。

    • offset: (String 类型 )下拉刷新控件的起始位置

      仅对"circle"样式下拉刷新控件有效,用于定义刷新控件下拉时的起始位置。 相对于Webview的顶部偏移量,支持百分比,如"10%";像素值,如"50px"。 默认值为"0px"。

    • contentdown: (JSON 类型 )在下拉可刷新状态时显示的内容

      支持以下属性: caption:在下拉可刷新状态时下拉刷新控件上显示的标题内容。

    • contentover: (JSON 类型 )在释放可刷新状态时显示的内容

      支持以下属性: caption:在释放可刷新状态时下拉刷新控件上显示的标题内容。

    • contentrefresh: (JSON 类型 )在正在刷新状态时显示的内容

      支持以下属性: caption:在正在刷新状态时下拉刷新控件上显示的标题内容。

    示例:

    
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8"/>
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    		<meta name="HandheldFriendly" content="true"/>
    		<meta name="MobileOptimized" content="320"/>
    		<title>Webview Example</title>
    		<script type="text/javascript" charset="utf-8">
    var ws=null;
    var list=null;
    // 扩展API加载完毕,现在可以正常调用扩展API 
    function plusReady(){
    	ws=plus.webview.currentWebview();
    	ws.setPullToRefresh({support:true,
    		height:'50px',
    		range:'200px',
    		contentdown:{
    			caption:'下拉可以刷新'
    		},
    		contentover:{
    			caption:'释放立即刷新'
    		},
    		contentrefresh:{
    			caption:'正在刷新...'
    		}
    	},onRefresh);
    	plus.nativeUI.toast('下拉可以刷新');
    }
    // 判断扩展API是否准备,否则监听'plusready'事件
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    // DOM构建完成获取列表元素
    document.addEventListener('DOMContentLoaded', function(){
    	list=document.getElementById('list');
    })
    // 刷新页面
    function onRefresh(){
    	setTimeout(function(){
    		if(list){
    			var item=document.createElement('li');
    			item.innerHTML='<span>New Item '+(new Date())+'</span>';
    			list.insertBefore(item,list.firstChild);
    		}
    		ws.endPullToRefresh();
    	},2000);
    }
    		</script>
    		<style type="text/css">
    li {
    	padding: 1em;
    	border-bottom: 1px solid #eaeaea;
    }
    li:active {
    	background: #f4f4f4;
    }
    		</style>
    	</head>
    	<body>
    		<ul id="list" style="list-style:none;margin:0;padding:0;">
    			<li><span>Initializ List Item 1</span></li>
    			<li><span>Initializ List Item 2</span></li>
    			<li><span>Initializ List Item 3</span></li>
    			<li><span>Initializ List Item 4</span></li>
    			<li><span>Initializ List Item 5</span></li>
    			<li><span>Initializ List Item 6</span></li>
    			<li><span>Initializ List Item 7</span></li>
    			<li><span>Initializ List Item 8</span></li>
    			<li><span>Initializ List Item 9</span></li>
    			<li><span>Initializ List Item 10</span></li>
    		</ul>
    	</body>
    </html>
    				

    WebviewRenderedEventOptions

    Webview窗口rendered事件参数

    属性:

    • type: (String 类型 )判断窗口渲染完成类型

      可取值: "top"-从顶部向下偏移22px横线截屏检测渲染是否完成; "bottom"-从底部向上偏移25px横线检测渲染是否完成; "center"-从中间横线检测渲染是否完成; "auto"为全屏检测(左、中、右三条竖线)。 默认值为"auto"。

    • interval: (Number 类型 )判断窗口渲染完成间隔时间

      单位为ms(毫秒),默认值为150ms。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    var nw=null;
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    
    // 创建Webview窗口监听rendering事件
    function createWebview(){
    	// 打开新窗口
    	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    	nw.addEventListener('rendered', function(e){
    		console.log('Webview rendered');
    	}, false);
    	nw.setRenderedEventOptions({type:'bottom',interval:100});// 检查底部区域是否渲染完成,每隔100毫秒检查一次
    	nw.show();
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口渲染完成事件
    		<button onclick="createWebview()">Show</button>
    	</body>
    </html>
    				

    WebviewReplaceWebApiOptions

    替换H5标准API配置信息

    说明:

    目前仅支持替换H5标准定位接口

    属性:

    • geolocation: (String 类型 )替换H5标准定位接口(navigator.geolocation.*)

      由于网络原因,在部分手机上可能无法调用标准H5定位接口(navigator.geolocation.*)获取定位数据,此时可以通过此属性配置使用原生定位模块替换标准H5定位接口,可取值: "alldevice" - 在所有设备上替换标准H5定位接口(navigator.geolocation.*); "auto" - 自动替换H5标准定位接口,仅在调用标准H5定位接口无法获取数据的设备上替换; "none" - 不替换H5标准定位接口(navigator.geolocation.*)。 默认值为"none"。 注意:替换H5标准定位接口,会导致页面加载速度延迟100ms左右,推荐使用"auto"模式。

      平台支持

      • Android - ALL (支持)
      • iOS - 5.0+ (不支持): 无需替换,H5标准定位接口可获取定位数据。

    WebviewStatusbarStyles

    JSON对象,Webview窗口的系统状态栏区域样式

    说明:

    仅在应用设置为沉浸式状态栏样式下有效,非沉浸式状态栏样式下忽略此属性。

    属性:

    • background: (String 类型 )系统状态栏区域背景颜色

      颜色值格式为"#RRGGBB",如"#FF0000"表示为红色背景。 默认值为应用manifest.json中plus->statusbar->background属性配置的值,如果未配置此属性值,则使用系统默认状态栏的背景颜色。

      平台支持

      • Android - ALL (支持): 在部分设备上可能无法获取系统默认状态栏的背景颜色,此时使用默认颜色值"#D4D4D4"。 注意:为了避免跟系统状态栏的前景色冲突,忽略偏白颜色(RR>0xEB&&GG>0xEB&&BB>0xEB),忽略偏黑颜色(RR>0x1E&&GG>0x1E&&BB>0x1E)。
      • iOS - ALL (支持): iOS上无法获取系统默认状态栏的背景颜色,此时使用默认颜色值"#D4D4D4"。

    示例:

    
    <!DOCTYPE html>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Webview Example</title>
    	<script type="text/javascript">
    // H5 plus事件处理
    function plusReady(){
    }
    if(window.plus){
    	plusReady();
    }else{
    	document.addEventListener('plusready', plusReady, false);
    }
    var nw=null;
    // 创建非沉浸式状态栏的Webview窗口 
    function createWebview(){
    	nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {statusbar:{background:'#FF0000'}});
    	nw.show();
    }
    	</script>
    	</head>
    	<body>
    		Webview窗口的系统状态栏区域样式<br/>
    		注意:<br/>
    		请在应用配置文件manifest.json中添加plus->statusbar->immersed节点,并将值设置为true<br/>
    		<button onclick="createWebview()">Create</button>
    	</body>
    </html>
    				

    WebviewStyles

    JSON对象,Webview窗口对象的样式

    属性:

    • additionalHttpHeaders: (JSON 类型 )窗口加载页面时额外添加的HTTP请求头数据

      仅在Webview窗口第一次加载页面时使用,如用户点击的触发的链接跳转则不再添加此额外请求头数据。 如果Webview窗口非第一次加载页面时也需要额外添加HTTP请求头数据,可通过loadURL()方法的参数设置。 如果HTTP请求头中已经包含需要额外添加的头数据,则添加的请求数据覆盖默认值。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var ws=null,embed=null;
      // H5 plus事件处理
      function plusReady(){
      	ws=plus.webview.currentWebview();
      	embed=plus.webview.create('http://m.dcloud.io/', 'test', {top:'100px',bottom:'0px',additionalHttpHeaders:{Referer:'http://m.dcloud.io/}});
      	embed.show();
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      // 加载新URL页面
      function loadHtmlUrl() {
      	// 指定referer头数据
      	embed.loadURL('http://m.weibo.cn/u/3196963860', {Referer:'http://m.weibo.cn/'});
      }
      	</script>
      	</head>
      	<body>
      		加载新URL页面<br/>
      		<button onclick="loadHtmlUrl()">loadURL</button>
      	</body>
      </html>
      						
    • animationOptimization: (String 类型 )窗口动画优化方式

      可取值: "auto" - 如果窗口中存在titleNView或subNViews,窗口动画时真实Webview控件从动画窗口中移除加速(避免真实Webview渲染影响动画效率); "none" - 窗口动画不使用优化。 默认值为"auto"。

      平台支持

      • Android - ALL (支持)
      • iOS - ALL (不支持)
    • cachemode: (String 类型 )窗口的缓存模式

      可取值: "default" - 根据cache-control决定是否使用缓存数据,如果存在缓存并且没有过期则使用本地缓存资源,否则从网络获取; "cacheElseNetwork" - 只要存在缓存(即使过期)数据则使用,否则从网络获取; "noCache" - 不使用缓存数据,全部从网络获取; "cacheOnly" - 仅使用缓存数据,不从网络获取(注:如果没有缓存数据则会导致加载失败)。 默认使用"default"。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 5.0+ (不支持)
    • backButtonAutoControl: (String 类型 )Webview窗口自动处理返回键逻辑

      当Webview窗口在显示栈顶,并且Webview窗口中没有调用JS监听返回键(plus.key.addEventListener('backbutton',...))时按下返回键响应行为。 可取值: "hide" - 隐藏Webview窗口,隐藏动画与上一次调用显示时设置的动画类型相对应(如“slide-in-right”对应的关闭动画为“slid-out-right”); "close" - 关闭Webview窗口,关闭动画与上一次调用显示时设置的动画类型相对应(如“slide-in-right”对应的关闭动画为“slid-out-right”) ; "none" - 不做操作,将返回键传递给下一Webview窗口处理; "quit" - 退出应用。

    • background: (String 类型 )窗口的背景颜色

      窗口空白区域的背景模式,设置background为颜色值(参考CSS Color Names,可取值/十六进制值/rgb值/rgba值),窗口为独占模式显示(占整个屏幕区域); 设置background为“transparent”,则表示窗口背景透明,为非独占模式。

      平台支持

      • Android - 2.2+ (支持): Android平台4.0以上系统才支持“transparent”背景透明样式,4.0以下系统窗口显示白色背景。
      • iOS - 5.0+ (支持): iOS平台默认使用白色背景。
    • backgroundColorTop: (String 类型 )窗口顶部背景颜色值

      窗口内容滚动到顶部下拉时可见。 可取值: "#RRGGBB"格式字符串,如"#FF0000"表示红色; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为透明。

      平台支持

      • Android - ALL (不支持): 不支持此功能,忽略此属性。
      • iOS - 7.0+ (支持)
    • backgroundColorBottom: (String 类型 )窗口底部背景颜色

      窗口内容滚动到底部上拉时可见。 可取值: "#RRGGBB"格式字符串,如"#FF0000"表示红色; "rgba(R,G,B,A)",其中R/G/B分别代表红色值/绿色值/蓝色值,正整数类型,取值范围为0-255,A为透明度,浮点数类型,取值范围为0-1(0为全透明,1为不透明),如"rgba(255,0,0,0.5)",表示红色半透明。 默认值为透明。

      平台支持

      • Android - ALL (不支持): 不支持此功能,忽略此属性。
      • iOS - 7.0+ (支持)
    • blockNetworkImage: (Boolean 类型 )是否阻塞网络图片的加载

      布尔类型,true表示阻塞,false表示不阻塞,默认值为false。 阻塞后Webview窗口将不加载页面中使用的所有网络图片,可通过Webview窗口对象的setBlockNetWorkImage()方法动态修改此状态。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 5.0+ (不支持): 忽略此属性,Webview窗口加载页面中所有图片。
    • bottom: (String 类型 )窗口垂直向上的偏移量

      支持百分比、像素值,默认值无值(根据top和height属性值来自动计算)。 当同时设置了top和height值时,忽略此属性值; 当未设置height值时,可通过top和bottom属性值来确定窗口的高度。

    • bounce: (String 类型 )窗口遇到边框是否有反弹效果

      可取值: "none" - 表示没有反弹效果; "vertical" - 表示垂直方向有反弹效果; "horizontal" - 表示水平方向有反弹效果; "all" - 表示垂直和水平方向都有反弹效果。 默认值为"none"。

      平台支持

      • Android - ALL (支持): 无法单独控制垂直和水平方向(即"vertical","horizontal","all"都表示开启反弹效果)。 不支持动态修改,只能在创建时设置。
      • iOS - 5.1.1+ (支持)
    • bounceBackground: (String 类型 )窗口回弹效果区域的背景

      窗口回弹效果区域背景可支持颜色值或图片: 颜色值格式为"#RRGGBB",如"#FFFFFF"为设置白色背景; 背景图为"url(%image path%)",如"url(./icon.png)"为设置icon.png为背景图,图片采用平铺模式绘制。

      平台支持

      • Android - (不支持)
      • iOS - 5.0+ (支持): 默认值为系统窗口背景色,通常为黑色。
    • decelerationRate: (Number 类型 )窗口内容停止滑动的减速度

      当Webview加载的内容超过其高度时,可以拖拽滑动内容,decelerationRate属性控制手指松开后页面滑动的速度。 设置值越大手指松开后的滑动速度越快(滑动距离越长),其值域范围为0.0-1.0,默认值为0.989。

      平台支持

      • Android - ALL (不支持)
      • iOS - 5.0+ (支持)
    • dock: (WebviewDock 类型 )窗口的停靠方式

      当Webview窗口添加到另外一个窗口中时,停靠方式才会生效,采用停靠方式添加会导致原Webview窗口自动调整其大小避免其内容被子窗口盖住。 可取值:"top",控件停靠则页面顶部;"bottom",控件停靠在页面底部;"right",控件停靠在页面右侧;"left",控件停靠在页面左侧。 默认值为"bottom"。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 5.0+ (支持)
    • errorPage: (String 类型 )窗口加载错误时跳转的页面地址

      当Webview窗口无法加载指定的url地址时(如本地页面不存在,或者无法访问的网络地址),此时会自动跳转到指定的错误页面地址(仅支持本地页面地址)。 设置为“none”则关闭跳转到错误页面功能,此时页面显示Webview默认的错误页面内容。默认使用5+ Runtime内置的错误页面。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 5.0+ (支持)
    • replacewebapi: (WebviewReplaceWebApiOptions 类型 )替换H5标准API

      用于解决在部分设备上调用H5标准定位接口可能无法获取定位数据的问题。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建新窗口并设置替换H5标准接口 
      function create(){
      	var styles={replacewebapi:{geolocation:'auto'}};
      	var w = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles);
      	plus.webview.show(w); // 显示窗口
      }
      	</script>
      	</head>
      	<body>
      		自动替换H5标准定位接口<br/>
      		<button onclick="create()">Create</button>
      	</body>
      </html>
      						
    • hardwareAccelerated: (Boolean 类型 )窗口是否开启硬件加速

      布尔类型,true表示开启硬件加速,false表示不开启硬件加速,默认情况5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速,可以通过plus.webview.defaultHardwareAccelerated()方法获取默认Webview是否开启硬件加速。 由于不同设备对硬件加速的支持情况存在差异,开启硬件加速能加速HTML页面的渲染,但也会消耗更多的系统资源,从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题,因此在特定设备的特定页面如果出现以上问题需要手动设置关闭硬件加速来避免。

      平台支持

      • Android - 2.3+ (支持): 注意: 1. 如果在页面中使用Video标签播放视频则必须打开硬件加速功能; 2. 页面必须在创建时确定是否打开硬件加速功能,无法动态切换页面的硬件加速开关; 3. 首页Webview窗口是否开启硬件加速需在manifest.json中plus节点下的hardwareAccelerated属性值控制。
      • iOS - 5.1+ (不支持): 忽略此属性。
      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      // H5 plus事件处理
      function plusReady(){
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      
      // 创建新窗口并设置开启硬件加速
      function create(){
      	var styles={};
      	// 在Android5以上设备,如果默认没有开启硬件加速,则强制设置开启
      	if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)>=5){
      		styles.hardwareAccelerated=true;
      	}
      	var w = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles);
      	plus.webview.show(w); // 显示窗口
      }
      	</script>
      	</head>
      	<body>
      		开启硬件加速显示Webview窗口<br/>
      		<button onclick="create()">Create</button>
      	</body>
      </html>
      						
    • height: (String 类型 )窗口的高度

      支持百分比、像素值,默认为100%。 当未设置height属性值时,优先通过top和bottom属性值来计算窗口的高度。

    • kernel: (String 类型 )窗口使用的内核

      可取值: "WKWebview" - 在iOS8.0及以上系统使用WKWebview内核,低版本下仍然使用UIWebview内核; "UIWebview" - 在所有版本上都使用UIWebview内核。 默认值为"UIWebview"。 WKWebview内核的优势是: 1. 滚动时懒加载的图片也可以实时渲染,UIWebview在滚动停止后才能渲染; 2. WKWebview的video支持AirPlay。 但WKWebview也有些限制和不足,目前已知的问题有: 1. 不支持跨域设置cookie,即plus.navigator.setCookie()API无法使用; 2. 本地的HTML页面中的XHR不支持跨域访问,需使用plus.net.XMLHttpRequest来替换; 3. 不支持使用WebSQL,需使用indexDB来替换; 4. 不支持js原生混淆功能,需使用前端js混淆来替换; 5. 内存不足时会白屏。 首页的Webview的kernel在manifest中配置(plus->kernel->ios)。

      平台支持

      • Android - ALL (不支持)
      • iOS - ALL (支持)
    • left: (String 类型 )窗口水平向右的偏移量

      支持百分比、像素值,默认值为0px。 未设置left属性值时,优先通过right和width属性值来计算窗口的left位置。

    • margin: (String 类型 )窗口的边距

      用于定位窗口的位置,支持auto,auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。

    • mask: (String 类型 )窗口的遮罩

      用于设置Webview窗口的遮罩层样式,遮罩层会覆盖Webview中所有内容,包括子webview,并且截获webview的所有触屏事件,此时Webview窗口的点击操作会触发maskClick事件。 字符串类型,可取值: rgba格式字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)",表示黑色半透明; "none",表示不使用遮罩层; 默认值为"none",即无遮罩层。

      
      <!DOCTYPE html>
      <html>
      	<head>
      	<meta charset="utf-8">
      	<title>Webview Example</title>
      	<script type="text/javascript">
      var ws=null;
      // H5 plus事件处理
      function plusReady(){
      	ws=plus.webview.currentWebview();
      	// 显示遮罩层
      	ws.setStyle({mask:'rgba(0,0,0,0.5)'});
      	// 点击关闭遮罩层
      	ws.addEventListener('maskClick', function(){
      		ws.setStyle({mask:'none'});
      	},false);
      }
      if(window.plus){
      	plusReady();
      }else{
      	document.addEventListener('plusready', plusReady, false);
      }
      	</script>
      	</head>
      	<body>
      		Webview窗口页面加载完成事件
      		<br/>
      		点击窗口关闭遮罩层
      	</body>
      </html>
      						
    • opacity: (Number 类型 )窗口的不透明度

      0为全透明,1为不透明,默认值为1,即不透明。

      平台支持

      • Android - 2.2+ (支持): 需Android4.0及以上平台才支持,Android4.0以前平台忽略此属性。
      • iOS - 4.3+ (支持)
    • plusrequire: (String 类型 )控制Webview注入5+ API时机

      可取值: "ahead" - 尽量提前,拦截页面中网络js请求实现提前注入,如果没有拦截到js请求则在页面loaded时注入; "normal" - 页面loaded时注入; "later" - 较晚在注入,在loaded事件发生后2s再注入,plusready事件同样延迟; "none" - 不注入,页面无法调用5+ API,不触发plusready事件。 默认值为"normal"。

    • popGesture: (String 类型 )窗口的侧滑返回功能

      可取值: "none"-无侧滑返回功能; "close"-侧滑返回关闭Webview窗口; "hide"-侧滑返回隐藏webview窗口。

      平台支持

      • Android - 2.2+ (支持): 仅在流应用环境中支持;在5+应用中不支持此功能。
      • iOS - 5.0+ (支持): 默认值为"close"。
      
      // 创建webview支持侧滑返回:
      var wv=plus.webview.create('url','id',{'popGesture':'close'});
      wv.show();
      // 或这样写
      var wv=plus.webview.open('url','id',{'popGesture':'close'});
      
      // 动态改变webview的侧滑返回功能:
      var wv=plus.webview.currentWebview();
      // 关闭侧滑返回功能
      wv.setStyle({'popGesture':'none'});
      // 侧滑返回后关闭webview
      wv.setStyle({'popGesture':'close'});
      // 侧滑返回后隐藏webview
      wv.setStyle({'popGesture':'hide'});
      						
    • pullToRefresh: (WebviewPullToRefreshStyles 类型 )窗口下拉刷新配置

      设置窗口是否开启下拉刷新功能及样式。 开启下拉刷新后可通过监听窗口的"pullToRefresh"事件处理下拉刷新业务逻辑,更新操作完成后调用窗口的endPullToRefresh方法结束下拉刷新。

    • render: (String 类型 )窗口渲染模式

      支持以下属性值: "onscreen" - Webview窗口在屏幕区可见时渲染,不可见时不进行渲染,此时能减少内存使用量; "always" - Webview在任何时候都渲染,在内存较大的设备上使用,被遮挡的窗口在此中模式下显示的时候会有更流畅的效果。 默认值为"onscreen"。 仅Android平台支持。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 4.3+ (不支持)
    • right: (String 类型 )窗口水平向左的偏移量

      支持百分比、像素值,默认无值(根据left和width属性值来自动计算)。 当设置了left和width值时,忽略此属性值; 当未设置width值时,可通过left和bottom属性值来确定窗口的宽度。

    • scalable: (Boolean 类型 )窗口是否可缩放

      窗口设置为可缩放(scalable:true)时,用户可通过双指操作放大或缩小页面,此时html页面可通过meta节点设置“name="viewport" content="user-scalable=no"”来限制页面不可缩放。 窗口设置为不可缩放(scalable:false)时,用户不可通过双指操作放大或缩小页面,即使页面中的meta节点也无法开启可缩放功能。 默认值为false,即不可缩放。

    • scrollIndicator: (String 类型 )窗口是否显示滚动条

      用于控制窗口滚动条样式,可取值: "all":垂直和水平滚动条都显示; "vertical":仅显示垂直滚动条; "horizontal":仅显示水平滚动条; "none":垂直和水平滚动条都不显示。 默认值为"all",即垂直和水平滚动条都显示。 注意:显示滚动条的前提条件是窗口中的内容超过窗口显示的宽或高。

    • scrollsToTop: (Boolean 类型 )点击设备的状态栏时是否滚动返回至顶部

      true表示点击设备的状态栏可以滚动返回至顶部,false表示点击设备的状态栏不可以,默认值为true。 此功能仅iOS平台支持,在iPhone上有且只有一个Webview窗口的scrollsToTop属性值为true时才生效,所以在显示和关闭Webview窗口时需动态更新所有Webview的scrollsToTop值,已确保此功能生效。

      平台支持

      • Android - ALL (不支持)
      • iOS - 5.0+ (支持)
    • shareable: (Boolean 类型 )是否可分享窗口加载的链接地址

      在流应用环境(流应用/5+浏览器)中可通过分享按钮分享页面链接地址, 可取值: true - 可分享窗口加载页面链接地址; false - 不可分享窗口加载的页面链接地址,此时分享的是应用。 默认值值为true。

    • softinputMode: (String 类型 )弹出系统软键盘模式

      可选值:“adjustPan”- 弹出软键盘时Webview窗口自动上移,以保证当前输入框可见;“adjustResize”- 自动调整Webview窗口大小(屏幕区域减去软键盘区域),同时自动滚动Webview保证输入框可见。 默认值为“adjustPan”。

      平台支持

      • Android - ALL (不支持)
      • iOS - 5.0+ (支持)
    • statusbar: (WebviewStatusbarStyles 类型 )窗口状态栏样式

      仅在应用设置为沉浸式状态栏样式下有效,设置此属性后将自动保留系统状态栏区域不被Webview窗口占用(即Webview窗口非沉浸式样式显示)。

    • subNViews: (Array[ WebviewSubNViewStyles ] 类型 )定义窗口的原生子View控件

      数组类型,可通过配置项设置原生子View控件,每个配置项对应添加一个原生子View控件。 通过Webview窗口的getSubNViews()方法可获取原生子View控件对象数组。

      平台支持

      • Android - ALL (支持): 使用subNView时不建议同时使用父子Webview窗口嵌套,相互嵌套可能会引起显示不正确的问题。
    • titleNView: (WebviewTitleNViewStyles 类型 )定义窗口的标题栏控件样式

      设置此属性值则表明创建Webview窗口的标题栏控件,并可通过其属性值设置背景颜色、文本内容、文本颜色等。 通过Webview窗口的getTitleNView()方法可获取标题栏控件对象。

      平台支持

      • Android - ALL (支持): 使用titleNView时不建议同时使用父子Webview窗口嵌套,相互嵌套可能会引起显示不正确的问题。
    • top: (String 类型 )窗口垂直向下的偏移量

      支持百分比、像素值,默认值为0px。 未设置top属性值时,优先通过bottom和height属性值来计算窗口的top位置。

    • transition: (WebviewTransition 类型 )窗口定义窗口变换的动画效果
    • transform: (WebviewTransform 类型 )窗口定义窗口变形效果
    • position: (WebviewPosition 类型 )Webview窗口的排版位置

      当Webview窗口添加到另外一个窗口中时,排版位置才会生效,排版位置决定子窗口在父窗口中的定位方式。 可取值:"static",控件在页面中正常定位,如果页面存在滚动条则随窗口内容滚动;"absolute",控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动;"dock",控件在页面中停靠,停靠的位置由dock属性值决定。 默认值为"absolute"。

      平台支持

      • Android - (支持)
      • iOS - (支持)
    • userSelect: (Boolean 类型 )用户是否可选择内容

      可取值: true - 表示可选择内容,用户可通过长按来选择页面内容,如文本内容选择后可以弹出系统复制粘贴菜单; false - 表示不可选择内容,用户不可通过长按来选择页面内容。 默认值为true。 注意:在Web页面中可通过CSS的user-select对单个页面元素进行控制,前提是Webview对象的userSelect设置为true,否则CSS设置的user-select失效。

    • videoFullscreen: (String 类型 )视频全屏播放时的显示方向

      可取值: "auto": 自动适配,如果当前页面竖屏,则竖屏显示;如果当前页面横盘显示,则横屏;如果当前页面自动感应,则自动感应横竖屏切换。 "portrait-primary": 竖屏正方向; "portrait-secondary": 竖屏反方向,屏幕正方向按顺时针旋转180°; "landscape-primary": 横屏正方向,屏幕正方向按顺时针旋转90°; "landscape-secondary": 横屏方向,屏幕正方向按顺时针旋转270°; "landscape": 横屏正方向或反方向,根据设备重力感应器自动调整; 默认值为“auto”。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 4.3+ (不支持)
    • width: (String 类型 )窗口的宽度

      支持百分比、像素值,默认为100%。未设置width属性值时,可同时设置left和right属性值改变窗口的默认宽度。

    • zindex: (Number 类型 )窗口的堆叠顺序值

      拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面,拥有相同堆叠顺序的窗口后调用show方法则在前面。

    WebviewTransform

    一组用于定义页面或控件变形的属性

    WebviewTransition

    一组用于定义页面或控件转换效果的属性

    属性:

    • property: (String 类型 )产生变换效果的属性

      默认值为"all",暂不支持其它值。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 4.3+ (支持)
    • duration: (String 类型 )变换持续的时间

      默认值为0,即无动画效果。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 4.3+ (支持)
    • timingfunction: (String 类型 )窗口变换效果

      可取值: "linear":匀速变化,匀速动画效果; "ease-in":匀加速变化,逐渐变快的动画效果; "ease-out":匀减速变化,逐渐变慢的动画效果; "ease-in-out":先加速后减速变化,先变快后变慢的动画效果。 默认值为"ease-in-out"。

      平台支持

      • Android - 2.2+ (支持)
      • iOS - 4.3+ (支持)

    WebviewOverrideResourceOptions

    拦截Webview窗口资源请求的参数

    属性:

    • match: (String 类型 )区配需要拦截请求资源的URL地址

      支持正则表达式,默认值为空字符串(即不拦截)。

    • redirect: (String 类型 )拦截重定向的资源地址

      仅支持本地资源地址,如"_www"、"_doc"、"_downloads"、"_documents"等开头的路径。

    • mime: (String 类型 )重定向的资源数据类型

      RFC2045/RFC2046/RFC2047/RFC2048/RFC2049规范中定义的数据类型。 如普通文本(text/plain)、PNG图像(image/png)、GIF图形(image/gif)、JPEG图形(image/jpeg)。 如果未指定mime类型,则根据重定向资源路径自动区配。

    • encoding: (String 类型 )重定向的资源数据编码

      如未设置,则使用默认值"UTF-8"。

    • header: (JSON 类型 )设置重定向资源数据的http头数据

      可设置标注http头数据(如Content-type),也可设置自定义数据。 通常可通过此属性来设置拦截资源的缓存策略(如Cache-control)。

    WebviewOverrideUrlOptions

    拦截Webview窗口URL请求的属性

    属性:

    • effect: (String 类型 )拦截URL请求生效时机

      可取值: "instant" - 表示立即生效,即调用overrideUrlLoading方法后立即生效; "touchstart" - 表示用户操作Webview窗口(触发touchstart事件)后生效,如果用户没有操作Webview窗口则不对URL请求操作进行拦截处理。 默认值为"instant"。

    • mode: (String 类型 )拦截模式

      可取值: "allow"表示满足match属性定义的条件时不拦截url继续加载,不满足match属性定义的条件时拦截url跳转并触发callback回调; "reject"表示满足match属性定义的提交时拦截url跳转并触发callback回调,不满足match属性定义的条件时不拦截url继续加载。 默认值为"reject"。

    • match: (String 类型 )区配是否需要处理的URL请求

      支持正则表达式,默认值为对所有URL地址生效(相当于正则表达式“.*”)。 如果mode值为"allow"则允许区配的URL请求跳转,mode值为"reject"则拦截区配的URL请求。

    • exclude: (String 类型 )排除拦截处理请求类型

      不拦截处理指定类型的URL请求,直接使用系统默认处理逻辑。 可取值: "none"表示不排除任何URL请求(即拦截处理所有URL请求); "redirect"表示排除拦截处理301/302跳转的请求(谨慎使用,非a标签的href触发的URL请求可能会误判断为302跳转)。 默认值为"none"。

    WebviewListenResourceOptions

    监听Webview窗口资源加载的属性

    属性:

    • match: (String 类型 )区配是否需要处理的URL资源

      支持正则表达式,默认值为对所有URL资源请求生效(相当于正则表达式“.*”)。 如果Webview加载的资源区配条件,则触发回调事件。

    BounceEventCallback

    Webview窗口回弹事件的回调函数

    
    void onEvent( Event event ){
    	// Event handled code.
    }
    				

    参数:

    • event: ( Event ) 必选 Webview窗口回弹事件触发时事件数据
      Event对象包含以下属性: status - 表示回弹位置状态,设置顶部下拉回弹changeoffset属性后可取值:"beforeChangeOffset"表示可继续拖拽,此时松开拖拽窗口会回弹到其初始位置; "afterChangeOffset"表示回弹可停靠,此时松开拖拽窗口会回弹到停靠位置; "dragEndAfterChangeOffset"表示已进松开拖拽,并且窗口回弹到停靠位置。 设置左右侧侧滑slideoffset属性后可取值:"beforeSlide"表示未侧滑状态;"afterSlide"表示已侧滑状态。 offset - 表示回弹方向,可取值:"left"表示左侧滑动,"right"表示右侧滑动,"top"表示上侧下拉滑动。 target - 保存触发回弹此事件的Webview窗口对象。

    返回值:

    void : 无

    示例:

    
    <!DOCTYPE html>
    <html>