Webview

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2015-03-23   阅读次数: 426   查看权限: 游客查看

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

方法:

对象:

回调方法:

all

获取所有Webview窗口

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

说明:

获取应用中已创建的所有Webview窗口,包括所有未显示的Webview窗口。 返回WebviewObject对象数组中其打开先后顺序排列,即数组中第一个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>

close

关闭Webview窗口

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

说明:

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

参数:

  • id_wvobj (String) 可选 若操作窗口对象已经关闭,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。
  • aniClose (AnimationTypeClose) 可选 如果没有指定窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。
  • duration (Number) 可选 单位为ms,如果没有设置则使用显示窗口动画时间。

返回值:

示例:

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

create

创建新的Webview窗口

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

说明:

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

参数:

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

返回值:

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>

currentWebview

获取当前窗口的WebviewObject对象

WebviewObject plus.webview.currentWebview();

说明:

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

返回值:

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>

getWebviewById

查找指定标识的WebviewObject窗口

WebviewObject plus.webview.getWebviewById( id );

说明:

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

参数:

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

返回值:

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>

getLaunchWebview

获取应用首页WebviewObject窗口对象

WebviewObject plus.webview.getLaunchWebview();

说明:

 

返回值:

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>

hide

隐藏Webview窗口

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

说明:

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

参数:

  • id_wvobj (String) 可选 使用窗口对象时,若窗口对象已经隐藏,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的,若没有查找到对应id的WebviewObject对象,则无任何效果。
  • aniHide (AnimationTypeClose) 可选 如果没有指定窗口动画,则使用默认动画效果“none”。
  • duration (Number) 可选 单位为ms,如果没有设置则使用默认窗口动画时间。

返回值:

示例:

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

open

创建并打开Webview窗口

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

说明:

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

参数:

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

返回值:

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>

show

显示Webview窗口

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

说明:

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

参数:

  • id_wvobj (String) 可选 若操作Webview窗口对象显示,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先创建的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。
  • aniShow (AnimationTypeShow) 可选 如果没有指定窗口动画类型,则使用默认值“auto”,即自动选择上一次显示窗口的动画效果,如果之前没有显示过,则使用“none”动画效果。
  • duration (Number) 可选 单位为ms,如果没有设置则使用默认窗口动画时间600ms。
  • showedCB (ShowedCallback) 可选 当指定Webview窗口动画时,在动画执行完毕,窗口完全显示时触发回调。

返回值:

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>

AnimationTypeShow

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

AnimationTypeClose

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

WebviewObject

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

方法:

事件:

  • oncloseWebview窗口关闭事件
  • onerrorWebview窗口错误事件
  • onloadedWebview窗口页面加载完成事件
  • onloadingWebview窗口页面开始加载事件

属性:

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

addEventListener

添加事件监听器

wobj.addEventListener( event, listener, capture );

说明:

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

参数:

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

返回值:

示例:

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

append

在Webview窗口中添加子窗口

void wobj.append( webview );

说明:

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

参数:

  • webview (WebviewObject) 可选 被添加的Webview窗口需通过plus.webview.create方法创建,并且不能调用其show方法进行显示。 父窗口显示时子窗口会自动显示,父窗口隐藏时子窗口也会自动隐藏。

返回值:

示例:

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

wobj.appendJsFile( file );

说明:

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

参数:

  • file (String) 可选 js文件路径只支持本地文件,应该使用扩展相对路径类型的文件,如"_www/preload.js"。

返回值:

示例:

<!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://weibo.com/dhnetwork");
	nw.appendJsFile("_www/preload.js");
	nw.show();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
	</script>
	</head>
	<body>
		添加Webview窗口预加载js文件
	</body>
</html>

back

后退到上次加载的页面

void wobj.back();

说明:

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

返回值:

示例:

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

canBack

查询Webview窗口是否可后退

void wobj.canBack( queryCallback );

说明:

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

参数:

返回值:

示例:

<!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://weibo.com/dhnetwork","",{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回调方法返回。

参数:

返回值:

示例:

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

children

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

Array[WebviewObject] wobj.children();

说明:

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

返回值:

包含的子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://weibo.com/dhnetwork","",{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();

说明:

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

返回值:

示例:

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

说明:

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

参数:

  • aniClose (AnimationTypeClose) 可选 如果没有指定关闭窗口动画,则使用显示时设置的窗口动画相对应的关闭动画。
  • duration (Number) 可选 单位为ms,默认为窗口show方法设定的动画时间。

返回值:

示例:

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

evalJS

在Webview窗口中执行JS脚本

void wobj.evalJS( js );

说明:

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

参数:

  • options (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://weibo.com/dhnetwork","",{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页面。 如果窗口历史记录中没有可前进的页面则不触发任何操作。

返回值:

示例:

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

getStyle

获取Webview窗口的样式

WebviewStyle wobj.getStyle();

说明:

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

返回值:

WebviewStyle对象

示例:

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

getTitle

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

String wobj.getTitle();

说明:

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

返回值:

窗口加载页面的标题

示例:

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

getURL

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

String wobj.getURL();

说明:

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

返回值:

窗口加载页面的URL地址

示例:

<!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.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 );

说明:

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

参数:

  • aniHide (AnimationTypeClose) 可选 如果没有指定隐藏窗口动画,则使用默认动画效果“none”。
  • duration (Number) 可选 单位为ms,默认为窗口show方法设定的动画时间。

返回值:

示例:

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

isVisible

查询Webview窗口是否可见

Boolean wobj.isVisible();

说明:

若Webview窗口已经显示则返回true,若Webview窗口被隐藏则返回false。

返回值:

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

loadData

加载新HTML数据

void wobj.loadData( data );

说明:

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

参数:

  • data (String) 可选 要加载的HTML数据

返回值:

示例:

<!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.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 );

说明:

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

参数:

  • url (String) 可选 要加载的页面URL地址

返回值:

示例:

<!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.show();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// 加载新URL页面
function loadHtmlUrl() {
	embed.loadURL( 'http://m.csdn.net/' );
}
	</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实例对象。

返回值:

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窗口数组。

返回值:

此窗口创建的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.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窗口。

返回值:

创建当前窗口的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.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>

parent

获取当前Webview窗口的父窗口

WebviewObject wobj.parent();

说明:

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

返回值:

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

关键词: html5puls,Webview   编辑时间: 2015-03-23 23:29:04

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    1

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
0%(0)
100%(1)
上一篇:Uploader
下一篇:Webview继篇
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐