今天天气

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

37°5 H5

一、知识点

  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窗口对象

示例： 

// H5 plus事件处理
function plusReady(){
var ws=plus.webview.currentWebview();
console.log( "当前Webview窗口："+ws.getURL() );
}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}

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

 WebviewObject plus.webview.getWebviewById( id );

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

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

返回值：WebviewObject : WebviewObject窗口对象

示例： 

// 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);
}

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

WebviewObject plus.webview.getLaunchWebview();

返回值：WebviewObject : WebviewObject窗口对象

示例： 

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

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

WebviewObject plus.webview.getTopWebview();

返回值：WebviewObject : WebviewObject窗口对象

示例： 

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

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

示例： 

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

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窗口对象

示例： 

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

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。

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

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

返回值：WebviewObject : Webview窗口对象

示例： 

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

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。

示例： 

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

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窗口操作失败回调函数

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


分享到：