webview常见问题我要提意见

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

属性:

方法:

对象:

回调方法:

权限:

5+功能模块(permissions)


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

isRecovery

当前Webview窗口是否由于内核崩溃自动恢复


plus.webview.isRecovery;
				

说明:

Boolean 类型 只读属性

如果当前窗口是由于内核(WKWebview)崩溃恢复则返回true,否则返回false。 注意:仅iOS平台使用WKWebview内核时生效。

平台支持:

all

获取所有Webview窗口


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

说明:

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

参数:

返回值:

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

示例:


	// 获取所有Webview窗口
	var wvs=plus.webview.all();
	for(var i=0;i<wvs.length;i++){
		console.log('webview'+i+': '+wvs[i].getURL());
	}
				

uni-app使用plus注意事项

close

关闭Webview窗口


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

说明:

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

参数:

返回值:

void : 无

示例:


// 关闭Webview窗口
function closeWebview(){
	var ws=plus.webview.currentWebview();
	plus.webview.close(ws);
}
				

uni-app使用plus注意事项

create

创建新的Webview窗口


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

说明:

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

参数:

返回值:

WebviewObject : Webview窗口对象

示例:


// 创建并显示新窗口
function create(){
	var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
	w.show(); // 显示窗口
}
				

uni-app使用plus注意事项

currentWebview

获取当前窗口的WebviewObject对象


WebviewObject plus.webview.currentWebview();
				

说明:

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

参数:

返回值:

WebviewObject : Webview窗口对象

示例:


	// 获取当前Webview窗口对象
	var ws=plus.webview.currentWebview();
	console.log( "当前Webview窗口:"+ws.getURL() );
				

uni-app使用plus注意事项

getDisplayWebview

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


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

说明:

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

参数:

返回值:

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

示例:


	// 获取所有可视的Webview窗口
	var wvs=plus.webview.getDisplayWebview();
	for(var i=0;i<wvs.length;i++){
		console.log('Display webview '+i+': '+wvs[i].getURL());
	}
				

uni-app使用plus注意事项

getWebviewById

查找指定标识的WebviewObject窗口


WebviewObject plus.webview.getWebviewById( id );
				

说明:

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

参数:

返回值:

WebviewObject : WebviewObject窗口对象

示例:


	// 查找应用首页窗口对象
	var h=plus.webview.getWebviewById( plus.runtime.appid );
	console.log( "应用首页Webview窗口:"+h.getURL() );
				

uni-app使用plus注意事项

getLaunchWebview

获取应用首页WebviewObject窗口对象


WebviewObject plus.webview.getLaunchWebview();
				

参数:

返回值:

WebviewObject : WebviewObject窗口对象

示例:


	// 获取应用首页窗口对象
	var h=plus.webview.getLaunchWebview();
	console.log('应用首页Webview窗口:'+h.getURL());
				

uni-app使用plus注意事项

getSecondWebview

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


WebviewObject plus.webview.getSecondWebview();
				

说明:

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

参数:

返回值:

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

示例:


	// 获取应用第二个首页窗口对象
	var h=plus.webview.getSecondWebview();
	if(h){
		console.log('应用第二个首页Webview窗口:'+h.getURL());
	}else{
		console.log('应用不存在第二个首页Webview窗口');
	}
				

uni-app使用plus注意事项

getTopWebview

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


WebviewObject plus.webview.getTopWebview();
				

参数:

返回值:

WebviewObject : WebviewObject窗口对象

示例:


	// 获取应用首页窗口对象
	var h=plus.webview.getTopWebview();
	console.log('应用显示栈顶的Webview窗口:'+h.getURL());
				

uni-app使用plus注意事项

hide

隐藏Webview窗口


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

说明:

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

参数:

返回值:

void : 无

示例:


// 隐藏当前Webview窗口
function hideWebview(){
	plus.webview.hide(plus.webview.currentWebview());
}
				

uni-app使用plus注意事项

open

创建并打开Webview窗口


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

说明:

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

参数:

返回值:

WebviewObject : WebviewObject窗口对象

示例:


// 创建并显示新窗口
function openWebview(){
	var w = plus.webview.open('http://m.weibo.cn/u/3196963860');
}
				

uni-app使用plus注意事项

prefetchURL

预载网络页面


void plus.webview.prefetchURL(url);
				

说明:

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

参数:

返回值:

void : 无

示例:


var url = 'http://m.weibo.cn/u/3196963860';

// 预载网络页面
function prefetchWebview(){
	plus.webview.prefetchURL(url);
}

// 显示预载页面
function showWebview(){
	// 预创建新窗口(显示在可视区域外)
	wn=plus.webview.create(url, 'test',{render:'always'});
	wn.show('none');
}
				

uni-app使用plus注意事项

prefetchURLs

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


void plus.webview.prefetchURLs(urls);
				

说明:

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

参数:

返回值:

void : 无

示例:


var urls = ['http://m.weibo.cn/u/3196963860',
	'http://m3w.cn/'];

// 预载网络页面
function prefetchWebview(){
	plus.webview.prefetchURLs(urls);
}

// 显示预载页面
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');
}
				

uni-app使用plus注意事项

show

显示Webview窗口


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

说明:

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

参数:

返回值:

WebviewObject : Webview窗口对象

示例:


// 创建并显示新窗口
function create(){
	var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
	plus.webview.show(w); // 显示窗口
}
				

uni-app使用plus注意事项

startAnimation

Webview窗口组合动画


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

说明:

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

参数:

返回值:

void : 无

示例:


// 预创建新窗口
function createWebview(){
	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));
	});
}

// 窗口组合动画
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));
	});
}
				

uni-app使用plus注意事项

defaultHardwareAccelerated

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


Boolean plus.webview.defaultHardwareAccelerated();
				

说明:

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

参数:

返回值:

Boolean : Webview窗口默认开启硬件加速则返回true,否则返回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); // 显示窗口
}
				

uni-app使用plus注意事项

AnimationTypeShow

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

常量:

AnimationTypeClose

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

常量:

WebviewObject

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

属性:

方法:

事件:

id

Webview窗口的标识

说明:

String 类型 只读属性

调用plus.webview.createplus.webview.open新建窗口时传入的id参数值,如果没有设置id参数,此属性值为undefined。 注意:窗口标识只能在创建时设置,不支持动态修改,不要对此属性进行赋值操作。

示例:


	// 获取自身webview窗口
	var ws=plus.webview.currentWebview();
	console.log('窗口标识: '+ws.id);
						

uni-app使用plus注意事项

addEventListener

添加事件监听器


wobj.addEventListener( event, listener, capture );
						

说明:

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

参数:

返回值:

void : 无

示例:


var nw=null;
// 监听Webview窗口事件
function listenWebviewEvent() {
	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);
}
						

uni-app使用plus注意事项

append

在Webview窗口中添加子窗口


void wobj.append( webview );
						

说明:

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

参数:

返回值:

void : 无

示例:


	//在Webview窗口中添加子窗口
	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'46px',bottom:'0px'});
	plus.webview.currentWebview().append(embed);
						

uni-app使用plus注意事项

appendJsFile

添加Webview窗口预加载js文件


void wobj.appendJsFile( file );
						

说明:

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

参数:

返回值:

void : 无

示例:


// 添加Webview窗口预加载js文件
function appendJs2Webviewe(){
	var nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
	nw.appendJsFile('_www/preload.js');
	nw.show();
}
						

uni-app使用plus注意事项

animate

Webview窗口内容动画


void wobj.animate(options, callback);
						

说明:

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

参数:

返回值:

void : 无

示例:


// Webview窗口动画 
function animateWebview(){
	wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){
		wv.restore();	// 内容动画结束后可调用此动画恢复显示内容
	});
}
					

uni-app使用plus注意事项

back

后退到上次加载的页面


void wobj.back();
						

说明:

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

参数:

返回值:

void : 无

示例:


var embed=null;
// 创建子窗口
function createWebview(){
	embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
	plus.webview.currentWebview().append(embed);
}

// 后退到上次加载的页面
function goForward() {
	embed.forward();
}
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

checkRenderedContent

检测Webview窗口是否渲染完成


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

说明:

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

参数:

返回值:

void : 无

平台支持:

示例:


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

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

close

关闭Webview窗口


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

说明:

关闭并销毁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>
						

uni-app使用plus注意事项

drag

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


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

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

draw

截屏绘制


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

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

evalJS

在Webview窗口中执行JS脚本


void wobj.evalJS( js );
						

说明:

将JS脚本发送到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'});
	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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

getSafeAreaInsets

获取页面的安全区域


SafeAreaInsets wobj.getSafeAreaInsets();
							

说明:

Webview窗口内容区域的安全区域位置信息。 如页面底部与底部安全区域重叠10px, 则返回的bottom值为10,否则返回0。

参数:

返回值:

plus.navigator.SafeAreaInsets : 页面的安全区域信息

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

getTitleNViewSearchInputText

获取标题栏上输入框的内容


String wobj.getTitleNViewSearchInputText();
						

说明:

仅在窗口使用原生标题栏(titleNView)并配置显示搜索框(searchInput)时生效。

参数:

返回值:

String : 标题栏搜索框中输入的文本,如果没有配置显示搜索框则返回空字符串。

getURL

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


String wobj.getURL();
						

说明:

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

参数:

返回值:

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

uni-app使用plus注意事项

hide

隐藏Webview窗口


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

说明:

隐藏Webview窗口可保存已加载HTML页面的上下文数据,能降低应用使用的系统资源,通过show方法可将隐藏的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>
						

uni-app使用plus注意事项

hideTitleNViewButtonRedDot

隐藏标题栏上按钮的红点


void wobj.hideTitleNViewButtonRedDot(options);
						

说明:

仅在窗口使用原生标题栏(titleNView)时生效,未显示原生标题栏时操作此接口无任何效果。

参数:

options参数为json类型,包含以下属性:

返回值:

void : 无

interceptTouchEvent

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


void wobj.interceptTouchEvent(intercept);
						

说明:

拦截后触屏事件不再传递,否则传递给View控件下的其它窗口处理。 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);
}
// 拦截触屏事件 
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>
						

uni-app使用plus注意事项

isHardwareAccelerated

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


Boolean wobj.isHardwareAccelerated();
						

说明:

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

参数:

返回值:

Boolean : 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);
}
// 查询Webview窗口是否开启硬件加速
function isHardwareAccelerated() {
	alert('是否开启硬件加速:'+ws.isHardwareAccelerated());
}
	</script>
	</head>
	<body>
		查询Webview窗口是否开启硬件加速
		<button onclick="isHardwareAccelerated()">isHardwareAccelerated</button>
	</body>
</html>
						

uni-app使用plus注意事项

isPause

查询Webview窗口是否暂停


Boolean wobj.isPause();
						

说明:

如果Webview窗口已经暂停则返回true,否则返回false。

参数:

返回值:

Boolean : Webview窗口是否暂停

平台支持:

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>
						

uni-app使用plus注意事项

listenResourceLoading

监听页面开始加载资源


void wobj.listenResourceLoading(options, callback);
						

说明:

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

参数:

返回值:

void : 无

平台支持:

示例:


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

uni-app使用plus注意事项

loadData

加载新HTML数据


void wobj.loadData(data, options);
						

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

loadURL

加载新URL页面


void wobj.loadURL(url, additionalHttpHeaders);
						

说明:

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

参数:

返回值:

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

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

overrideResourceRequest

拦截Webview窗口的资源加载


void wobj.overrideResourceRequest(options);
						

说明:

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

参数:

返回值:

void : 无

平台支持:

示例:


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

uni-app使用plus注意事项

overrideUrlLoading

拦截Webview窗口的URL请求


void wobj.overrideUrlLoading(options, callback);
						

说明:

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

参数:

返回值:

void : 无

平台支持:

示例:


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

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

pause

暂停当前Webview窗口


void wobj.pause();
						

说明:

Webview窗口的js停止运行,页面内容不再更新渲染。 应用中存在多个Webview窗口时,可以停止不显示的Webview,减少对系统资源的占用。 注意:暂停后在窗口显示时需调用resume恢复。

参数:

返回值:

void : 无

平台支持:

reload

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


void wobj.reload( force );
						

说明:

触发Webview窗口重新加载当前显示的页面内容。 如果当前HTML页面未加载完则停止并重新加载,如果当前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窗口显示的HTML页面
function reloadWebview() {
	embed.reload(true);
}
	</script>
	</head>
	<body>
		重新加载Webview窗口显示的HTML页面
		<button onclick="reloadWebview()">reload</button>
	</body>
</html>
						

uni-app使用plus注意事项

resetBounce

重置Webview窗口的回弹位置


void wobj.resetBounce();
						

说明:

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

参数:

返回值:

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

uni-app使用plus注意事项

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>
					

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

removeEventListener

移除Webview窗口事件监听器


void wobj.removeEventListener( event, listener );
						

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

removeTitleNViewButtonBadge

移除标题栏上按钮的角标


void wobj.removeTitleNViewButtonBadge(options);
						

说明:

仅在窗口使用原生标题栏(titleNView)时生效,未显示原生标题栏时操作此接口无任何效果。

参数:

options参数为json类型,包含以下属性:

返回值:

void : 无

resume

恢复当前Webview窗口


void wobj.resume();
						

说明:

Webview窗口暂停后,调用此方法恢复js运行及页面内容的更新渲染。

参数:

返回值:

void : 无

平台支持:

setBounce

设置Webview窗口的回弹效果


void wobj.setBounce( style );
						

说明:

开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置(可通过style设置)。 拖拽窗口内容时页面显示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();
	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>
						

uni-app使用plus注意事项

setBlockNetworkImage

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


void wobj.setBlockNetworkImage( block );
						

参数:

返回值:

void : 无

平台支持:

示例:


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

uni-app使用plus注意事项

setContentVisible

设置HTML内容是否可见


void wobj.setContentVisible( visible );
						

说明:

设置HTML内容不可见后,将显示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 setContentVisible(v) {
	embed.setContentVisible(v);
}
	</script>
	</head>
	<body>
		设置HTML内容是否可见<br/>
		<button onclick="setContentVisible(true)">可见</button><br/>
		<button onclick="setContentVisible(false)">不可见</button><br/>
	</body>
</html>
						

uni-app使用plus注意事项

setCssFile

设置预加载的CSS文件


void wobj.setCssFile( path );
						

说明:

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

参数:

返回值:

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.setCssFile('_www/js/preload.css');
	ws.append(embed);
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
	</script>
	</head>
	<body>
		设置加载的CSS文件
	</body>
</html>
						

uni-app使用plus注意事项

setCssText

设置预加载的CSS内容


void wobj.setCssText( text );
						

说明:

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

参数:

返回值:

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.setCssText('body{background:red;}');
	ws.append(embed);
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
	</script>
	</head>
	<body>
		设置加载的CSS内容
	</body>
</html>
						

uni-app使用plus注意事项

setFavoriteOptions

设置Webview窗口的收藏参数


void wobj.setFavoriteOptions(options);
						

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

setFixBottom

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


void wobj.setFixBottom( height );
						

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

setJsFile

设置预加载的JS文件


void wobj.setJsFile( path );
						

说明:

预加载JS文件不需要在HTML页面中显式引用,在Webview窗口加载HTML页面时自动加载,在页面跳转时也会自动加载。 设置新的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>
						

uni-app使用plus注意事项

setPullToRefresh

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


void wobj.setPullToRefresh(style, refreshCB );
						

说明:

开启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"/>
		<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>
						

uni-app使用plus注意事项

setRenderedEventOptions

设置Webview窗口rendered事件参数


void wobj.setRenderedEventOptions(options);
						

说明:

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

参数:

返回值:

void : 无

平台支持:

示例:


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

uni-app使用plus注意事项

setSoftinputTemporary

临时设置弹出系统软键盘样式

说明:

仅生效一次,设置后第一次弹出软键盘时生效。

参数:

返回值:

void : 无

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>
						

uni-app使用plus注意事项

setShareOptions

设置Webview窗口的分享参数


void wobj.setShareOptions(options);
						

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

setTitleNViewButtonBadge

设置标题栏上按钮的角标


void wobj.setTitleNViewButtonBadge(options);
						

说明:

仅在窗口使用原生标题栏(titleNView)时生效,未显示原生标题栏时操作此接口无任何效果。

参数:

options参数为json类型,包含以下属性:

返回值:

void : 无

setTitleNViewButtonStyle

设置标题栏上按钮的样式


void wobj.setTitleNViewButtonStyle(index, styles);
						

说明:

仅在窗口使用原生标题栏(titleNView)时生效,未显示原生标题栏时操作此接口无任何效果。

参数:

返回值:

void : 无

setTitleNViewSearchInputFocus

设置标题栏上输入框是否获取输入焦点


void wobj.setTitleNViewSearchInputFocus(focus);
						

说明:

仅在窗口使用原生标题栏(titleNView)并配置显示搜索框(searchInput)时生效,未显示原生标题栏时操作此接口无任何效果。

参数:

返回值:

void : 无

setTitleNViewSearchInputText

设置标题栏上输入框的内容


void wobj.setTitleNViewSearchInputText(text);
						

说明:

如果要清空用户输入的内容,可以设置为空字符串。 仅在窗口使用原生标题栏(titleNView)并配置显示搜索框(searchInput)时生效,未显示原生标题栏时操作此接口无任何效果。

参数:

返回值:

void : 无

setVisible

设置Webview窗口是否可见


void wobj.setVisible( visible );
						

说明:

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

参数:

返回值:

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>
						

uni-app使用plus注意事项

show

显示Webview窗口


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

说明:

当调用plus.webview.create方法创建Webview窗口后,需要调用其show方法才能显示,并可设置窗口显示动画及动画时间。 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>
						

uni-app使用plus注意事项

showBehind

在指定Webview窗口后显示


void wobj.showBehind( webview );
						

说明:

当调用plus.webview.create方法创建Webview窗口后,可调用其showBehind方法显示在指定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>
						

uni-app使用plus注意事项

showTitleNViewButtonRedDot

设置标题栏上按钮的红点


void wobj.showTitleNViewButtonRedDot(options);
						

说明:

仅在窗口使用原生标题栏(titleNView)时生效,未显示原生标题栏时操作此接口无任何效果。 注意:设置显示按钮的角标后红点不显示。

参数:

options参数为json类型,包含以下属性:

返回值:

void : 无

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>
						

uni-app使用plus注意事项

updateSubNViews

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


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

说明:

通过WebviewSubNViewStyles中的id属性值匹配子View控件更新绘制内容,如果没有查找到对应id的子View控件则忽略。 此操作仅更新子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>
						

uni-app使用plus注意事项

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>
						

uni-app使用plus注意事项

onerror

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

uni-app使用plus注意事项

onloaded

Webview窗口页面加载完成事件

说明:

EventCallback 类型

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

示例:


<!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'});
	embed.onloaded=embedLoaded;
	embed.show();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 页面加载完成事件回调函数
function embedLoaded(e){
	plus.nativeUI.alert('Loaded!');
}
	</script>
	</head>
	<body>
		Webview窗口页面加载完成事件
		<button onclick="embed.loadURL('http://m.weibo.cn')">onloaded</button>
	</body>
</html>
						

uni-app使用plus注意事项

onloading

Webview窗口页面开始加载事件

说明:

EventCallback 类型

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

示例:


<!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'});
	embed.onloading=embedLoading;
	embed.show();
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready', plusReady, false);
}
// 页面开始加载事件回调函数
function embedLoading(e){
	plus.nativeUI.alert('Loading!');
}
	</script>
	</head>
	<body>
		Webview窗口页面开始加载事件
		<button onclick="embed.loadURL('http://m.weibo.cn')">onloading</button>
	</body>
</html>
						

uni-app使用plus注意事项

WebviewAnimationOptions

Webview窗口动画参数


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

说明:

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

属性:

示例:


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

uni-app使用plus注意事项

WebviewAnimationStyles

Webview窗口动画样式


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

说明:

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

属性:

WebviewBounceStyle

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

uni-app使用plus注意事项

WebviewContentAnimationOptions

Webview窗口内容动画参数


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

说明:

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

属性:

示例:


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

uni-app使用plus注意事项

WebviewDock

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

常量:

WebviewDragEvent

Webview窗口滑动事件数据

属性:

WebviewDragOptions

窗口手势操作参数

属性:

示例:


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

uni-app使用plus注意事项

WebviewDragOtherViewOptions

手势操作关联对象参数

属性:

示例:


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

uni-app使用plus注意事项

WebviewDrawOptions

截屏绘制操作参数

属性:

示例:


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

uni-app使用plus注意事项

WebviewFavoriteOptions

窗口收藏参数

说明:

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

属性:

WebviewLoadDataOptions

创建加载HTML数据参数

属性:

WebviewShareOptions

窗口的分享参数

说明:

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

属性:

WebviewSubNViewStyles

窗口原生子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>
				

uni-app使用plus注意事项

WebviewTitleNViewStyles

窗口标题栏控件样式

说明:

标题栏控件固定高度为44px,可通过Webview窗口对象的getTitleNView方法获取标题栏原生控件对象plus.nativeObj.View,调用其方法绘制自定义内容。 可以通过WebviewObject对象的setStyle方法传入titleNView属性更新样式,如wobj.setStyle({titleNView:{titleColor:'#FF0000'}})。

属性:

示例:


// 带标题栏控件的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();
	});
}
				

uni-app使用plus注意事项

WebviewTitleNViewBackButtonStyles

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

说明:

返回按钮由返回图标(字体图标)和标题组成。 默认只显示返回图标。
注意:HBuilderX2.6.3+版本支持。

属性:

WebviewTitleNViewButtonStyles

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

属性:

示例:


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

uni-app使用plus注意事项

WebviewTitleNViewSearchInputStyles

窗口标题栏搜索框样式

说明:

搜索输入框输入内容变化时触发"titleNViewSearchInputChanged"事件; 用户点击软键盘上的“搜索”按钮时触发"titleNViewSearchInputConfirmed"事件。

属性:

WebviewProgressStyles

标题栏控件的进度条样式

说明:

显示在标题栏控件底部。

属性:

示例:


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

uni-app使用plus注意事项

WebviewSplitLineStyles

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

说明:

显示在标题栏控件底部。

属性:

示例:


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

uni-app使用plus注意事项

WebviewEvent

Webview窗口事件

常量:

WebviewExtraOptions

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

属性:

示例:


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

uni-app使用plus注意事项

WebviewPosition

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

常量:

WebviewPullToRefreshStyles

Webview窗口下拉刷新样式

属性:

示例:


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

uni-app使用plus注意事项

WebviewRenderedEventOptions

Webview窗口rendered事件参数

属性:

示例:


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

uni-app使用plus注意事项

WebviewReplaceWebApiOptions

替换H5标准API配置信息

说明:

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

属性:

WebviewStatusbarStyles

JSON对象,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);
}
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>
				

uni-app使用plus注意事项

WebviewStyles

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

属性:

WebviewTransform

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

WebviewTransition

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

属性:

WebviewOverrideResourceOptions

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

属性:

WebviewOverrideUrlOptions

拦截Webview窗口URL请求的属性

属性:

WebviewListenResourceOptions

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

属性:

BounceEventCallback

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


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

参数:

返回值:

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

uni-app使用plus注意事项

EventCallback

Webview窗口事件的回调函数


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

参数:

返回值:

void : 无

示例:


<!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: '+e.target.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>
				

uni-app使用plus注意事项

PopGestureCallback

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


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

参数:

返回值:

void : 无

示例:


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

uni-app使用plus注意事项

HistoryQueryCallback

历史记录查询的回调函数


void onHistoryQuery( Event event ) {
	// Event handled code.
	var canBack = event.canBack;
	var canForward = event.canForward;
}
				

参数:

返回值:

void : 无

ListenResourceLoadingCallback

Webview窗口加载资源事件的回调函数


void onLoadingResource( Event event ) {
	// Event handled code.
	var url = event.url;
}
				

参数:

返回值:

void : 无

OverrideUrlLoadingCallback

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


void onOverride( Event event ) {
	// Event handled code.
	var url = event.url;
}
				

参数:

返回值:

void : 无

TitleUpdateCallback

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


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

参数:

返回值:

void : 无

WebviewAnimationCallback

Webview窗口组合动画回调函数


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

参数:

返回值:

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>
				

uni-app使用plus注意事项

WebviewDragCallback

Webview窗口滑屏操作事件回调函数


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

说明:

在窗口开始滑动、滑动过程、滑动结束时触发,其中滑动过程中会触发多次,滑动过程中触发次数由WebviewDragOptions对象的callbackStep决定。

参数:

返回值:

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>
				

uni-app使用plus注意事项

WebviewCustomButtonCallback

Webview窗口标题栏上自定义按钮点击事件回调函数


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

说明:

用户点击自定义按钮时触发。

参数:

返回值:

void : 无

SuccessCallback

Webview窗口操作成功回调函数


void onSuccess(){
	// Success code.
}
				

说明:

Webview窗口业务操作成功后触发回调函数。

参数:

返回值:

void : 无

ErrorCallback

Webview窗口操作失败回调函数


void onError(error){
	// Handle the error
	var code = error.code; // 错误编码
	var message = error.message; // 错误描述信息
}
				

参数:

返回值:

void : 无