今天天气

HTML5+的规范：Webview(管理应用窗口界面)——下篇

37°5 H5

二、重点

1、 在Webview窗口中添加子窗口 

embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});
plus.webview.currentWebview().append( embed );
与下面使用show显示Webview窗口效果一样。
ws=plus.webview.currentWebview();
embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});
embed.show();

2、appendJsFile和setJsFile

（1）、wobj.appendJsFile( file )：添加Webview窗口预加载js文件

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

var nw=plus.webview.create("http://weibo.com/dhnetwork");
nw.appendJsFile("_www/preload.js");
nw.show();

（2）、void wobj.setJsFile( path )：设置预加载的JS文件

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

ws=plus.webview.currentWebview();
embed=plus.webview.create("http://weibo.com/dhnetwork");
embed.setJsFile( "_www/js/preload.js" );
ws.append(embed);

3、clear:、hide和close

（1）、clear: 清空原生Webview窗口加载的内容 

void wobj.clear();

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

embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});
plus.webview.currentWebview().append( embed );
embed.clear();

（2）、hide: 隐藏Webview窗口 

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

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

plus.webview.hide( plus.webview.currentWebview() );

（3）、hide: 隐藏Webview窗口 

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

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

ws=plus.webview.currentWebview();
embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});
embed.show();
embed.hide();

（4）、close: 关闭Webview窗口 

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

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

var ws=plus.webview.currentWebview();
plus.webview.close(ws);

（5）、close: 关闭Webview窗口 

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

说明：关闭并销毁Webview窗口，可设置关闭动画和动画持续时间。 

ws=plus.webview.currentWebview();
ws.close();

4、setPullToRefresh：设置Webview窗口的下拉刷新效果 

void wobj.setPullToRefresh( style, refreshCB );

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

参数：

style: ( WebviewRefreshStyle) 必选 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>
<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
<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>

5、setStyle：设置Webview窗口的样式 

void wobj.setStyle( styles );

说明：更新Webview窗口的样式，如窗口位置、大小、背景色等。

参数：styles: ( WebviewStyles ) 必选 要设置的窗口样式

返回值：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://weibo.com/dhnetwork","",{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>

6、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>

7、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.csdn.net/","csdn",{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>

8、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://weibo.com/dhnetwork" );
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>

9、WebviewEvent：Webview窗口事件

   （1）、"close": (String 类型 )Webview窗口关闭事件。通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口关闭时触发此事件，回调函数类型为EventCallback。

   （2）、"dragBounce": (String 类型 )Webview窗口回弹事件。通过WebviewObject对象的setBounce方法开启回弹效果设置顶部下拉回弹changeoffset属性后，当用户向下拖拽窗口时触发发此事件，回调函数类型为BounceEventCallback。

   （3）、"slideBounce": (String 类型 )Webview窗口回弹事件。通过WebviewObject对象的setBounce方法开启回弹效果设置左右侧侧滑slideoffset属性后，当用户向左右侧拖拽窗口侧滑时触发发此事件，回调函数类型为BounceEventCallback。

   （4）、"error": (String 类型 )Webview窗口加载错误事件。通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口加载错误时触发此事件，回调函数类型为EventCallback。

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

   （6）、"loading": (String 类型 )Webview窗口页面开始加载事件。通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口开始加载新页面时触发此事件，回调函数类型为EventCallback。

   （7）、"loaded": (String 类型 )Webview窗口页面加载完成事件。通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口页面加载完成时触发此事件，回调函数类型为EventCallback。

   （8）、"maskClick": (String 类型 )Webview窗口显示遮罩层时点击事件。通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件，回调函数类型为EventCallback。

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

   （10）、"popGesture": (String 类型 )Webview窗口侧滑返回事件。通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口侧滑返回时触发此事件，回调函数类型为PopGestureCallback。

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

10、事件 

<!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://weibo.com/dhnetwork","",{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>

（1）、onclose: Webview窗口关闭事件

（2）、onerror: Webview窗口错误事件

（3）、onloaded: Webview窗口页面加载完成事件

（4）、onloading: Webview窗口页面开始加载事件

上部分完，大家可以去看看 “HTML5+的规范：Webview(管理应用窗口界面)——上篇”https://www.alvinxiao.com/Article/index/artid/65.html


分享到：