一、知识点

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

1、方法

1.1、all: 获取所有Webview窗口

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

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

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

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

1.2、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">

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

1.3、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">

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

w.show(); // 显示窗口

}

</script>

</head>

<body>

创建新的Webview窗口<br/>

<button onclick="create()">Create</button>

</body>

</html>

1.4、currentWebview: 获取当前窗口的WebviewObject对象

WebviewObject plus.webview.currentWebview();

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

返回值：WebviewObject : Webview窗口对象

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

1.5、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">

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

1.6、getLaunchWebview: 获取应用首页WebviewObject窗口对象

WebviewObject plus.webview.getLaunchWebview();

返回值：WebviewObject : WebviewObject窗口对象

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

1.7、getTopWebview: 获取应用显示栈顶的WebviewObject窗口对象

WebviewObject plus.webview.getTopWebview();

返回值：WebviewObject : WebviewObject窗口对象

示例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

1.8、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">

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

1.9、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，如果没有设置则使用默认窗口动画时间600ms。

showedCB: ( SuccessCallback ) 可选 Webview窗口显示完成的回调函数。当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。

返回值：WebviewObject : WebviewObject窗口对象

示例：

<!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 openWebview(){

var w = plus.webview.open( "http://weibo.com/dhnetwork" );

}

</script>

</head>

<body>

打开Webview窗口<br/>

<button onclick="openWebview()">Open</button>

</body>

</html>

1.10、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。

extras: ( WebviewExtraOptions) 可选显示Webview窗口扩展参数。可用于指定Webview窗口动画是否使用图片加速。

返回值：WebviewObject : Webview窗口对象

示例：

<!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 w = plus.webview.create( "http://weibo.com/dhnetwork" );

plus.webview.show( w ); // 显示窗口

}

</script>

</head>

<body>

显示Webview窗口<br/>

<button onclick="create()">Create</button>

</body>

</html>

1.11、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://weibo.com/dhnetwork", "test", styles );

plus.webview.show( w ); // 显示窗口

}

</script>

</head>

<body>

开启硬件加速显示Webview窗口<br/>

<button onclick="create()">Create</button>

</body>

</html>

2、对象

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

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

WebviewObject: Webview窗口对象，用于操作加载HTML页面的窗口

WebviewBounceStyle: Webview窗口回弹样式

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

WebviewEvent: Webview窗口事件

WebviewRefreshStyle: Webview窗口下拉刷新样式

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

WebviewStyles: JSON对象，原生窗口设置参数的对象

WebviewExtraOptions: JSON对象，原生窗口扩展参数

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

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

WebviewOverrideUrlOptions: 拦截Webview窗口URL请求的属性

3、回调方法

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

EventCallback: Webview窗口事件的回调函数

PopGestureCallback: Webview窗口侧滑事件的回调函数

HistoryQueryCallback: 历史记录记录查询的回调函数

OverrideUrlLoadingCallback: Webview窗口拦截URL链接跳转的回调函数

TitleUpdateCallback: Webview窗口加载页面标题更新的回调函数

SuccessCallback: Webview窗口操作成功回调函数

ErrorCallback: Webview窗口操作失败回调函数

二、重点

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、事件

（1）、onclose: 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://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>

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

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

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

HTML5+规范：Webview(管理应用窗口界面)的更多相关文章

关于html5 -- plus Webview模块管理应用窗口界面
Webview模块管理应用窗口界面,通过plus.webview可获取应用界面管理对象. 方法: all:获取所有的webview窗口 close:关闭webview窗口 create:创建新的web ...
HTML5+规范：nativeUI(管理系统原生界面)
nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口.时间日期选择对话框.等待对话框等. 1.方法 1.1.actionSheet: 弹出系统选择按钮框 void plus.native ...
HTML5+规范：Webview的使用详解
一.知识点 Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作.通过plus.webview可获取应用界面管理对象. 1.方法 1.1.all: 获取所有Webview窗口 Array[ ...
基于 HTML5 的 PID-进料系统可视化界面
前言随着工业物联网和互联网技术的普及和发展,人工填料的方式已经逐渐被机械设备取代.工业厂商减小误操作.提升设备安全以及追求高效率等制造特点对设备的要求愈加高标准.严要求.同时机械生产以后还需遵从整个 ...
HTML5 离线缓存管理库
一.HTML5离线缓存技术支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
HTML5规范尘埃落定，5个开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻.数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势.其 ...
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸
iPhone/iPad/Android UI尺寸规范 UI尺寸规范,UI图标尺寸,UI界面尺寸,iPhone6尺寸,iPhone6 Plus尺寸,安卓尺寸,iOS尺寸 iPhone界面尺寸设备分辨 ...
分享在winform下实现左右布局多窗口界面-续篇
之前的这篇文章<分享在winform下实现左右布局多窗口界面>已经实现了左右布局多窗口界面,今天本来是研究基于winform的插件编程,没想到顺便又找到了另一种实现方案,这种实现方案更简单 ...
Win10下PB停在欢迎窗口界面
问题:Win10下不能打开PB12.5,PB12.6,一直停在欢迎窗口界面. 解决方法:把服务"Touch Keyboard and Handwriting Panel Service&qu ...

随机推荐

ECMAScript5新特性之Object.isExtensible、Object.preventExtensions
阻止对象扩展后: 1 不能添加属性. 2 可以修改属性的值. 3 可以删除属性. 4 可以修改属性描述符. var fruit = { name : '苹果', desc : '红富士' }; // ...
jsp清除缓存
好多代码都是: <% response.setHeader("Cache-Control", "no-store"); //HTTP 1.1 respon ...
.net VS2008 时间加减，时间段，时间格式化到秒
举个例子: DateTime time1 = DateTime.Now; DateTime time2 = time1.AddDays(1); time1是当前时间,time2比当前时间多一天.也就是 ...
xcode - 显示安装过的低版本模拟器
1. 更改版本
maven打包部署到私服
转载地址:http://blog.csdn.net/stormragewang/article/details/43407471 心得 apache的开源maven插件对我们使用maven进行打包,发 ...
php中的declare
<?php // 事件的回调函数 function func_tick() { echo "call...\r\n"; } // 注册事件的回调函数 register_tic ...
一个方便的java分页算法
一个好用的java分页算法,代码如下,只需要分页参数继承Pageable类就可以很方便分页了 package cn.com.base.common.pagination; /** * 分页基类 * * ...
Codeforces 689B. Mike and Shortcuts SPFA/搜索
B. Mike and Shortcuts time limit per test: 3 seconds memory limit per test: 256 megabytes input: sta ...
2018年上半年UI领域主要的13个设计趋势
2018年时间过半,通过过去的6个月的观察,其实我们已经可以对于2018年的整个UI领域的设计趋势有了一个更为清晰的判断. 也是推出这篇文章比较合理的时机.下面我们就一起来回顾一下,过去的半年当中,U ...
oracle常用函数速记
1.截断中文字符串 CREATE OR REPLACE function cn_cutstr(v_str varchar2,v_len number) return varchar2 IS v_i n ...

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

一、知识点

1、方法

1.1、all: 获取所有Webview窗口

1.2、close: 关闭Webview窗口

1.3、create: 创建新的Webview窗口

1.4、currentWebview: 获取当前窗口的WebviewObject对象

1.5、getWebviewById: 查找指定标识的WebviewObject窗口

1.6、getLaunchWebview: 获取应用首页WebviewObject窗口对象

1.7、getTopWebview: 获取应用显示栈顶的WebviewObject窗口对象

1.8、hide: 隐藏Webview窗口

1.9、open: 创建并打开Webview窗口

1.10、show: 显示Webview窗口

1.11、defaultHardwareAccelerated: 获取Webview默认是否开启硬件加速

2、对象

3、回调方法

二、重点

HTML5+规范：Webview(管理应用窗口界面)的更多相关文章

随机推荐

热门专题