htmi5中js怎么改左js 偏移量

HTML5+ API Reference
Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。
: 获取所有Webview窗口
: 关闭Webview窗口
: 创建新的Webview窗口
: 获取当前窗口的WebviewObject对象
: 获取屏幕所有可视的Webview窗口
: 查找指定标识的WebviewObject窗口
: 获取应用首页WebviewObject窗口对象
: 获取应用第二个首页WebviewObject窗口对象
: 获取应用显示栈顶的WebviewObject窗口对象
: 隐藏Webview窗口
: 创建并打开Webview窗口
: 预载网络页面
: 预载网络页面(多个地址)
: 显示Webview窗口
: Webview窗口组合动画
: 获取Webview默认是否开启硬件加速
: 一组用于定义页面或控件显示动画效果
: 一组用于定义页面或控件关闭的动画效果
: Webview窗口对象,用于操作加载HTML页面的窗口
: Webview窗口动画参数
: Webview窗口动画样式
: Webview窗口回弹样式
: Webview窗口内容动画参数
: 原生控件在窗口中停靠的方式
: Webview窗口滑动事件数据
: 窗口手势操作参数
: 手势操作关联对象参数
: 截屏绘制操作参数
: 窗口收藏参数
: 窗口的分享参数
: 窗口原生子View控件样式
: 窗口标题栏控件样式
: 窗口标题栏自定义按钮样式
: 标题栏控件的进度条样式
: 窗口标题栏控件的分割线样式
: Webview窗口事件
: JSON对象,原生窗口扩展参数
: 原生控件在窗口中显示的位置
: Webview窗口下拉刷新样式
: Webview窗口rendered事件参数
: 替换H5标准API配置信息
: JSON对象,Webview窗口的系统状态栏区域样式
: JSON对象,Webview窗口对象的样式
: 一组用于定义页面或控件变形的属性
: 一组用于定义页面或控件转换效果的属性
: 拦截Webview窗口资源请求的参数
: 拦截Webview窗口URL请求的属性
: 监听Webview窗口资源加载的属性
回调方法:
: Webview窗口回弹事件的回调函数
: Webview窗口事件的回调函数
: Webview窗口侧滑事件的回调函数
: 历史记录查询的回调函数
: Webview窗口加载资源事件的回调函数
: Webview窗口拦截URL链接跳转的回调函数
: Webview窗口加载页面标题更新的回调函数
: Webview窗口组合动画回调函数
: Webview窗口滑屏操作事件回调函数
: Webview窗口标题栏上自定义按钮点击事件回调函数
: Webview窗口操作成功回调函数
: Webview窗口操作失败回调函数
5+功能模块(permissions)
"permissions":{
"Webview": {
"description": "窗口管理"
获取所有Webview窗口
Array[WebviewObject] plus.webview.all();
获取应用中已创建的所有Webview窗口,包括所有未显示的Webview窗口。
返回WebviewObject对象在数组中按创建的先后顺序排列,即数组中第一个WebviewObject对象用是加载应用的入口页面。
应用中创建的所有Webview窗口对象数组。
&!DOCTYPE html&
&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(){
// 获取所有Webview窗口
var wvs=plus.webview.all();
for(var i=0;i&wvs.i++){
console.log('webview'+i+': '+wvs[i].getURL());
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
获取所有Webview窗口
关闭Webview窗口
void plus.webview.close( id_wvobj, aniClose, duration, extras );
关闭已经打开的Webview窗口,需先获取窗口对象或窗口id,并可指定关闭窗口的动画及动画持续时间。
必选 要关闭Webview窗口id或窗口对象
若操作窗口对象已经关闭,则无任何效果。
使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。
可选 关闭Webview窗口的动画效果
如果没有指定关闭窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。
可选 关闭Webview窗口动画的持续时间
单位为ms,如果没有设置则使用显示窗口动画时间。
可选 关闭Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
: 无示例:
&!DOCTYPE html&
&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(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 关闭自身窗口
function closeme(){
var ws=plus.webview.currentWebview();
plus.webview.close(ws);
关闭Webview窗口&br/&
&button onclick="closeme()"&close&/button&
创建新的Webview窗口
WebviewObject plus.webview.create( url, id, styles, extras );
创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。
可选 新窗口加载的HTML页面地址
新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址。
可选 新窗口的标识
窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。
如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
可选 创建Webview窗口的额外扩展参数
值为JSON类型,设置扩展参数后可以直接通过Webview的点(“.”)操作符获取扩展参数属性值,如:
var w=plus.webview.create('url.html','id',{},{preload:'preload webview'});
// 可直接通过以下方法获取preload值
console.log(w.preload); // 输出值为“preload webview”
: Webview窗口对象示例:
&!DOCTYPE html&
&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(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 创建并显示新窗口
function create(){
var w = plus.webview.create('/u/');
w.show(); // 显示窗口
创建新的Webview窗口&br/&
&button onclick="create()"&Create&/button&
获取当前窗口的WebviewObject对象
WebviewObject plus.webview.currentWebview();
获取当前页面所属的Webview窗口对象。
: Webview窗口对象示例:
&!DOCTYPE html&
&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(){
var ws=plus.webview.currentWebview();
console.log( "当前Webview窗口:"+ws.getURL() );
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
获取自身Webview窗口
获取屏幕所有可视的Webview窗口
Array[WebviewObject] plus.webview.getDisplayWebview();
仅在屏幕区域显示的Webview窗口,如果Webview窗口显示了但被其它Webview窗口盖住则认为不可视。
屏幕中可视的Webview窗口对象数组。
&!DOCTYPE html&
&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(){
// 获取所有可视的Webview窗口
var wvs=plus.webview.getDisplayWebview();
for(var i=0;i&wvs.i++){
console.log('Display webview '+i+': '+wvs[i].getURL());
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
获取屏幕所有可视的Webview窗口
查找指定标识的WebviewObject窗口
WebviewObject plus.webview.getWebviewById( id );
在已创建的窗口列表中查找指定标识的Webview窗口并返回。
若没有查找到指定标识的窗口则返回null,若存在多个相同标识的Webview窗口,则返回第一个创建的Webview窗口。
如果要获取应用入口页面所属的Webview窗口,其标识为应用的%APPID%,可通过plus.runtime.appid获取。
必选 要查找的Webview窗口标识
: WebviewObject窗口对象示例:
&!DOCTYPE html&
&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(){
// 查找应用首页窗口对象
var h=plus.webview.getWebviewById( plus.runtime.appid );
console.log( "应用首页Webview窗口:"+h.getURL() );
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
查找指定标识的窗口
获取应用首页WebviewObject窗口对象
WebviewObject plus.webview.getLaunchWebview();
: WebviewObject窗口对象示例:
&!DOCTYPE html&
&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(){
// 获取应用首页窗口对象
var h=plus.webview.getLaunchWebview();
console.log('应用首页Webview窗口:'+h.getURL());
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
获取应用首页WebviewObject窗口对象
获取应用第二个首页WebviewObject窗口对象
WebviewObject plus.webview.getSecondWebview();
在双首页模式下(在manifest.json的plus-&secondwebview节点下配置),应用会自动创建两个首页Webview,通过getLaunchWebview()可获取第一个首页窗口对象,通过getSecondWebview()可获取第二个首页窗口对象。
WebviewObject窗口对象,在非双首页模式下则返回undefined。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
// 获取应用第二个首页窗口对象
var h=plus.webview.getSecondWebview();
console.log('应用第二个首页Webview窗口:'+h.getURL());
console.log('应用不存在第二个首页Webview窗口');
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
获取应用第二个首页WebviewObject窗口对象
获取应用显示栈顶的WebviewObject窗口对象
WebviewObject plus.webview.getTopWebview();
: WebviewObject窗口对象示例:
&!DOCTYPE html&
&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(){
// 获取应用首页窗口对象
var h=plus.webview.getTopWebview();
console.log('应用显示栈顶的Webview窗口:'+h.getURL());
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
获取应用显示栈顶的WebviewObject窗口对象
隐藏Webview窗口
void plus.webview.hide( id_wvobj, aniHide, duration, extras );
根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。
必选 要隐藏的Webview窗口id或窗口对象
使用窗口对象时,若窗口对象已经隐藏,则无任何效果。
使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的,若没有查找到对应id的WebviewObject对象,则无任何效果。
可选 隐藏Webview窗口的动画效果
如果没有指定窗口动画,则使用默认动画效果“none”。
可选 隐藏Webview窗口动画的持续时间
单位为ms,如果没有设置则使用默认窗口动画时间。
可选 隐藏Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
: 无示例:
&!DOCTYPE html&
&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(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 隐藏自身窗口
function hideeme(){
plus.webview.hide(plus.webview.currentWebview());
隐藏Webview窗口&br/&
&button onclick="hideeme()"&Hide&/button&
创建并打开Webview窗口
WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
创建并显示Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后自动将Webview窗口显示出来。
可选 打开窗口加载的HTML页面地址
新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址。
可选 打开窗口的标识
窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。
如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
可选 创建Webview窗口的样式(如窗口宽、高、位置等信息)
可选 显示Webview窗口的动画效果
如果没有指定窗口动画,则使用默认无动画效果“none”。
可选 显示Webview窗口动画的持续时间
单位为ms,默认值为200ms(毫秒)。
可选 Webview窗口显示完成的回调函数
当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。
: WebviewObject窗口对象示例:
&!DOCTYPE html&
&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(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 创建并显示新窗口
function openWebview(){
var w = plus.webview.open('/u/');
打开Webview窗口&br/&
&button onclick="openWebview()"&Open&/button&
预载网络页面
void plus.webview.prefetchURL(url);
预载网络页面会向服务器发起http/https请求获取html页面内容,
待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。
注意:预载网络页面仅在运行期生效,为了节省内存仅保留最后5个预载页面数据。
必选 需要预载的页面地址
必须是网络地址(http/https),本地页面地址无需预载。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var url = '/u/';
var ws=null,wn=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
// 预载网络页面
plus.webview.prefetchURL(url);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 打开窗口
function showWebview(){
// 预创建新窗口(显示在可视区域外)
wn=plus.webview.create(url, 'test',{render:'always'});
wn.show('none');
&br/&&br/&
&button onclick="showWebview()"&显示预载页面&/button&
预载网络页面(多个地址)
void plus.webview.prefetchURLs(urls);
预载网络页面会向服务器发起http/https请求获取html页面内容,
待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。
注意:预载网络页面仅在运行期生效,为了节省内存仅保留最后5个预载页面数据。
必选 需要预载的页面地址数组
数组项必须是网络地址(http/https),本地页面地址无需预载。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var urls = ['/u/',
var ws=null,wn=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
// 预载网络页面
plus.webview.prefetchURLs(urls);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 打开窗口
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');
&br/&&br/&
&button onclick="showWebview()"&显示预载页面&/button&&br/&
&button onclick="showWebview1()"&显示预载页面1&/button&
显示Webview窗口
void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
显示已创建或隐藏的Webview窗口,需先获取窗口对象或窗口id,并可指定显示窗口的动画及动画持续时间。
必选 要显示Webview窗口id或窗口对象
若操作Webview窗口对象显示,则无任何效果。
使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先创建的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。
可选 显示Webview窗口的动画效果
如果没有指定窗口动画类型,则使用默认值“auto”,即自动选择上一次显示窗口的动画效果,如果之前没有显示过,则使用“none”动画效果。
可选 显示Webview窗口动画的持续时间
单位为ms,如果没有设置则使用默认窗口动画时间600ms。
可选 Webview窗口显示完成的回调函数
当指定Webview窗口显示动画执行完毕时触发回调函数,窗口无动画效果(如"none"动画效果)时也会触发此回调。
可选 显示Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
: Webview窗口对象示例:
&!DOCTYPE html&
&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(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 创建并显示新窗口
function create(){
var w = plus.webview.create('/u/');
plus.webview.show(w); // 显示窗口
显示Webview窗口&br/&
&button onclick="create()"&Create&/button&
Webview窗口组合动画
void plus.webview.startAnimation(options, otherOptions, callback);
同步组合两个Webview窗口动画,动画完成后窗口的位置会发生变化,一次需要在动画属性参数中设置动画起始位置、结束位置等。
注意:此动画操作会改变窗口位置(如left值等),再次调用show方法时需要确保其位置是否在可视区域,如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内,如setStyle({left:'0px'});。
必选 主窗口动画属性
设置动画的主窗口及其起始位置,结束位置等信息。
otherOptions:
可选 关联窗口动画属性
设置关联的窗口及其起始位置,结束位置等信息。
可选 Webview窗口组合动画完成回调
每个窗口动画完成时触发一次回调,可通过回调参数的id属性获取窗口的标识。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,wn=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
// 预创建新窗口(显示在可视区域外)
wn=plus.webview.create('/u/', '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();
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));
&br/&&br/&
&button onclick="webviewAnimation()"&窗口组合动画显示新窗口&/button&
&br/&&br/&
在新窗口中可以右滑返回(新窗口移动到屏幕外)
获取Webview默认是否开启硬件加速
Boolean plus.webview.defaultHardwareAccelerated();
由于不同设备对硬件加速的支持情况存在差异,开启硬件加速能加速HTML页面的渲染,但也会消耗更多的系统资源,从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题, 因此5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速。
关闭硬件加速则可能会导致Webview页面无法支持Video标签播放视频等问题,如果在特定情况下需要调整修改默认开启硬件加速的行为,则可通过plus.webview.defaultHardwareAccelerated()方法获取当前设备默认是否开启硬件加速状态,从而决定是否需要显式开启或关闭指定Webview的硬件加速功能(通过WebviewStyles的hardwareAccelerated属性设置)。
Webview窗口默认开启硬件加速则返回true,否则返回false。
平台支持:
返回当前设备默认是否开启硬件加速。
返回固定值true。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 创建新窗口并设置开启硬件加速
function create(){
var styles={};
// 在Android5以上设备,如果默认没有开启硬件加速,则强制设置开启
if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)&=5){
styles.hardwareAccelerated=
var w = plus.webview.create('/u/', 'test', styles);
plus.webview.show(w); // 显示窗口
开启硬件加速显示Webview窗口&br/&
&button onclick="create()"&Create&/button&
一组用于定义页面或控件显示动画效果
"auto": (String
)自动选择动画效果
自动选择动画效果,使用上次显示窗口设置的动画效果,如果是第一次显示则默认动画效果“none”。
"none": (String
)无动画效果
立即显示页面,无任何动画效果,页面显示默认的动画效果。
此效果忽略动画时间参数,立即显示。
对应关闭动画"none"。
"slide-in-right": (String
)从右侧横向滑动效果
页面从屏幕右侧外向内横向滑动显示。
对应关闭动画"slide-out-right"。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"slide-in-left": (String
)从左侧横向滑动效果
页面从屏幕左侧向右横向滑动显示。
对应关闭动画"slide-out-left"。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"slide-in-top": (String
)从上侧竖向滑动效果
页面从屏幕上侧向下竖向滑动显示。
对应关闭动画"slide-out-top"。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"slide-in-bottom": (String
)从下侧竖向滑动效果
页面从屏幕下侧向上竖向滑动显示。
对应关闭动画"slide-out-bottom"。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"fade-in": (String
)从透明到不透明逐渐显示效果
页面从完全透明到不透明逐渐显示。
对应关闭动画"fade-out"。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"zoom-out": (String
)从小到大逐渐放大显示效果
页面在屏幕中间从小到大逐渐放大显示。
对应关闭动画"zoom-in"。
Android - 2.2+ (支持):
默认动画时间为100ms。
iOS - 5.1.1+ (支持):
默认动画时间为100ms。
"zoom-fade-out": (String
)从小到大逐渐放大并且从透明到不透明逐渐显示效果
页面在屏幕中间从小到大逐渐放大并且从透明到不透明逐渐显示。
对应关闭动画"zoom-fade-in"。
Android - 2.2+ (支持):
默认动画时间为100ms。
iOS - 5.1.1+ (支持):
默认动画时间为100ms。
"pop-in": (String
)从右侧平移入栈动画效果
页面从屏幕右侧滑入显示,同时上一个页面带阴影效果从屏幕左侧滑出隐藏。
对应关闭动画"pop-out"。
Android - 2.2+ (支持):
默认动画时间为200ms。
此动画是新开窗口侧滑挤压当前屏幕窗口特效,必须是两个Webview窗口的组合动画,
如果当前屏幕已显示多个Webview窗口,则显示新窗口不支持此动画类型,自动转成“slide-in-right”。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
一组用于定义页面或控件关闭的动画效果
"auto": (String
)自动选择动画效果
自动选择显示窗口相对于的动画效果。
"none": (String
立即关闭页面,无任何动画效果。
此效果忽略动画时间参数,立即关闭。
"slide-out-right": (String
)横向向右侧滑出屏幕动画
页面从屏幕中横向向右侧滑动到屏幕外关闭。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"slide-out-left": (String
)横向向左侧滑出屏幕动画
页面从屏幕中横向向左侧滑动到屏幕外关闭。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"slide-out-top": (String
)竖向向上侧滑出屏幕动画
页面从屏幕中竖向向上侧滑动到屏幕外关闭。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"slide-out-bottom": (String
)竖向向下侧滑出屏幕动画
页面从屏幕中竖向向下侧滑动到屏幕外关闭。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"fade-out": (String
)从不透明到透明逐渐隐藏动画
页面从不透明到透明逐渐隐藏关闭。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
"zoom-in": (String
)从大逐渐缩小关闭动画
页面逐渐向页面中心缩小关闭。
Android - 2.2+ (支持):
默认动画时间为100ms。
iOS - 5.1.1+ (支持):
默认动画时间为100ms。
"zoom-fade-in": (String
)从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画
页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。
Android - 2.2+ (支持):
默认动画时间为100ms。
iOS - 5.1.1+ (支持):
默认动画时间为100ms。
"pop-out": (String
)从右侧平移出栈动画效果
页面从屏幕右侧滑出消失,同时上一个页面带阴影效果从屏幕左侧滑入显示。
Android - 2.2+ (支持):
默认动画时间为200ms。
iOS - 5.1.1+ (支持):
默认动画时间为300ms。
Webview窗口对象,用于操作加载HTML页面的窗口
: Webview窗口的标识
: 添加事件监听器
: 在Webview窗口中添加子窗口
: 添加Webview窗口预加载js文件
: Webview窗口内容动画
: 后退到上次加载的页面
: 开始Webview窗口的下拉刷新
: 查询Webview窗口是否可后退
: 查询Webview窗口是否可前进
: 检测Webview窗口是否渲染完成
: 获取Webview窗口的所有子Webview窗口
: 清空原生Webview窗口加载的内容
: 关闭Webview窗口
: 设置Webview窗口的滑屏操作手势
: 截屏绘制
: 结束Webview窗口的下拉刷新
: 在Webview窗口中执行JS脚本
: 前进到上次加载的页面
: 获取Webview窗口的收藏参数
: 获取Webview窗口的分享参数
: 获取Webview窗口的样式
: 获取Webview窗口的原生子View控件对象
: 获取Webview窗口加载HTML页面的标题
: 获取Webview窗口的标题栏控件对象
: 获取Webview窗口加载HTML页面的地址
: 隐藏Webview窗口
: 是否拦截Webview窗口的触屏事件
: 查询Webview窗口是否开启硬件加速
: 查询Webview窗口是否可见
: 监听页面开始加载资源
: 加载新HTML数据
: 加载新URL页面
: 获取Webview窗口对象的原生(Native.JS)实例对象
: 获取在当前Webview窗口中创建的所有窗口
: 获取当前Webview窗口的创建者
: 拦截Webview窗口的资源加载
: 拦截Webview窗口的URL请求
: 获取当前Webview窗口的父窗口
: 重新加载Webview窗口显示的HTML页面
: 重置Webview窗口的回弹位置
: 恢复Webview控件显示内容
: 移除子Webview窗口
: 移除Webview窗口事件监听器
: 从父窗口中移除
: 设置Webview窗口的回弹效果
: 设置Webview窗口是否阻塞加载页面中使用的网络图片
: 设置HTML内容是否可见
: 设置Webview窗口的收藏参数
: 设置Webview窗口的下拉刷新效果
: 设置Webview窗口rendered事件参数
: 设置Webview窗口的样式
: 设置Webview窗口的分享参数
: 设置预加载的JS文件
: 设置预加载的CSS文件
: 设置预加载的CSS内容
: 设置Webview窗口是否可见
: 设置Webview窗口底部修复区域高度
: 显示Webview窗口
: 在指定Webview窗口后显示
: 停止加载HTML页面内容
: 更新Webview窗口的原生子View控件对象
: Webview窗口关闭事件
: Webview窗口错误事件
: Webview窗口页面加载完成事件
: Webview窗口页面开始加载事件
Webview窗口的标识
在打开或创建Webview窗口时设置,如果没有设置窗口标识,此属性值为undefined。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
// 获取自身webview窗口
var ws=plus.webview.currentWebview();
console.log('窗口标识: '+ws.id);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
Webview窗口的标识&br/&
添加事件监听器
wobj.addEventListener( event, listener, capture );
向Webview窗口添加事件监听器,当指定的事件发生时,将触发listener函数的执行。
可多次调用此方法向Webview添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。
必选 Webview窗口事件类型
必选 监听事件发生时执行的回调函数
可选 捕获事件流顺序,暂无效果
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 监听Webview窗口事件
function eventTest() {
var w=plus.nativeUI.showWaiting()
// 打开新窗口
nw=plus.webview.create('/u/');
nw.addEventListener('loaded', function(){
console.log('New Window loaded!');
nw.show(); // 显示窗口
w.close();
}, false);
添加事件监听器&br/&
&button onclick="eventTest()"&Event Listener&/button&
在Webview窗口中添加子窗口
void wobj.append( webview );
将另一个Webview窗口作为子窗口添加到当前Webview窗口中,添加后其所有权归父Webview窗口,当父窗口关闭时子窗口自动关闭。
必选 被添加的子Webview窗口或View控件对象
被添加的Webview窗口需通过plus.webview.create方法创建,并且不能调用其show方法进行显示。
父窗口显示时子窗口会自动显示,父窗口隐藏时子窗口也会自动隐藏。
被添加的View控件需通过new plus.nativeObj.View()创建,添加到Webview窗口后所有权一起转移(即Webview关闭后View控件也自动关闭)。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var embed=
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('/u/', '',{top:'46px',bottom:'0px'});
plus.webview.currentWebview().append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
在Webview窗口中添加子窗口
&button onclick="plus.webview.currentWebview().close();"&Back&/button&
添加Webview窗口预加载js文件
void wobj.appendJsFile( file );
对于一些网络HTML页面,在无法修改HTML页面时可通过此方法自动加载本地js文件。
当Webview窗口跳转到新页面时也会自动加载指定的js执行,添加多个js文件将按照添加的先后顺序执行。
必选 窗口预加载的js文件地址
js文件路径只支持本地文件,应该使用扩展相对路径类型的文件,如"_www/preload.js"。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
var nw=plus.webview.create('/u/');
nw.appendJsFile('_www/preload.js');
nw.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
添加Webview窗口预加载js文件
Webview窗口内容动画
void wobj.animate(options, callback);
动画后可能会导致Webview窗口显示内容改变,可通过调用restore方法恢复。
当Webview窗口内容动画引起内容不可见(透明),将显示此窗口后面的内容。
可选 Webview窗口内容动画参数
可选 Webview窗口内容动画结束回调函数
Webview窗口内容动画效果结束时触发。
注意:动画结束时仍然会显示Webview窗口,需要调用其hide/close方法隐藏/关闭。
: 无示例:
&!DOCTYPE HTML&
&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"&
// H5 plus事件处理
function plusReady(){
wv = plus.webview.currentWebview();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// Webview窗口动画
function animateWebview(){
wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){
wv.restore(); // 内容动画结束后可调用此动画恢复显示内容
Webview窗口内容动画&br/&
&button onclick="animateWebview()"&内容动画&/button&&br/&
后退到上次加载的页面
void wobj.back();
Webview窗口历史记录操作,后退到窗口上次加载的HTML页面。
如果窗口历史记录中没有可后退的页面则不触发任何操作。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var embed=
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
plus.webview.currentWebview().append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 返回上次页面
function goBack() {
embed.back();
// 前进到上次页面
function goForward() {
embed.forward();
后退到上次加载的页面
&button onclick="goBack()"&Back&/button&
&button onclick="goForward()"&Forward&/button&
开始Webview窗口的下拉刷新
void wobj.beginPullToRefresh();
开始触发下拉刷新效果,与用户操作下拉刷新行为一致(有动画效果)。
触发setPullTorefresh方法设置的下拉刷新事件回调。
: 无示例:
&!DOCTYPE HTML&
&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"&
// 扩展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();
// 判断扩展API是否准备,否则监听'plusready'事件
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// DOM构建完成获取列表元素
document.addEventListener('DOMContentLoaded', function(){
list=document.getElementById('list');
// 刷新页面
function onRefresh(){
setTimeout(function(){
var item=document.createElement('li');
item.innerHTML='&span&New Item '+(new Date())+'&/span&';
list.insertBefore(item,list.firstChild);
ws.endPullToRefresh();
&style type="text/css"&
padding: 1
border-bottom: 1px solid #
li:active {
background: #f4f4f4;
&ul id="list" style="list-style: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&
查询Webview窗口是否可后退
void wobj.canBack( queryCallback );
Webview窗口历史记录查询操作,获取Webview是否可后退到历史加载的页面,结果通过queryCallback回调方法返回。
queryCallback:
必选 查询历史记录操作回调函数
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var embed=
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
plus.webview.currentWebview().append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 是否可后退
function canBack() {
embed.canBack( function(e){
console.log('是否可返回:'+e.canBack);
查询Webview窗口是否可后退
&button onclick="canBack()"&canBack&/button&
查询Webview窗口是否可前进
void wobj.canForward( queryCallback );
Webview窗口历史记录查询操作,获取Webview是否可前进到历史加载的页面,结果通过queryCallback回调方法返回。
queryCallback:
必选 查询历史记录操作回调函数
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var embed=
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
plus.webview.currentWebview().append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 是否可前进
function canForward() {
embed.canForward( function(e){
console.log( "是否可前进:"+e.canForward );
查询Webview窗口是否可前进
&button onclick="canForward()"&canForward&/button&
检测Webview窗口是否渲染完成
void wobj.checkRenderedContent(options, successCallback, errorCallback);
检测方式为判断的Webview窗口内容是否为白屏,如果非白屏则认为渲染完成,否则认为渲染未完成。
通过successCallback回调函数返回结果,如果检测过程中发生错误则触发errorCallback回调函数。
可选 Webview窗口rendered事件参数
successCallback:
必选 检测Webview窗口渲染结果回调函数
获取渲染检测结果后触发,函数原型为void function(e){};
e.rendered:表示检测渲染完成结果,Boolean类型,true表示渲染完成,false表示渲染未完成。
errorCallback:
可选 检测Webview窗口渲染结果失败回调函数
检测Webview窗口渲染结果过程中发生错误则触发errorCallback回调函数。
: 无平台支持:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 创建Webview窗口
function createWebview(){
// 打开新窗口
nw=plus.webview.create('/u/');
nw.show();
function checkWebview(){
nw.checkRenderedContent({}, function(e){
console.log('checkRenderedContent success: '+JSON.stringify(e));
}, function(e){
console.log('checkRenderedContent error: '+JSON.stringify(e));
检测Webview窗口是否渲染完成&br/&
&button onclick="createWebview()"&Show&/button&&br/&
&button onclick="checkWebview()"&Check&/button&
获取Webview窗口的所有子Webview窗口
Array[WebviewObject] wobj.children();
获取添加到Webview窗口中的所有子Webview窗口,如果没有子Webview窗口则返回空数组。
包含的子Webview窗口对象数组,没有则返回空数组。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var embed=
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
plus.webview.currentWebview().append( embed );
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取子Webview窗口
function listChildren() {
var list=plus.webview.currentWebview().children();
for(var i=0;i&list.i++){
console.log('Children['+i+']: '+list[i].getURL());
获取Webview窗口的所有子Webview窗口
&button onclick="listChildren()"&Children&/button&
清空原生Webview窗口加载的内容
void wobj.clear();
清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var embed=
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
plus.webview.currentWebview().append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 清空Webview窗口
function webviewClear() {
embed.clear();
清空原生Webview窗口加载的内容
&button onclick="webviewClear()"&Clear&/button&
关闭Webview窗口
void wobj.close( aniClose, duration, extras );
关闭并销毁Webview窗口,可设置关闭动画和动画持续时间。
可选 关闭Webview窗口动画效果
如果没有指定关闭窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。
可选 关闭Webview窗口的动画持续时间
单位为ms,默认为窗口show方法设定的动画时间。
可选 关闭Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 关闭窗口
function closeMe() {
ws.close();
关闭Webview窗口
&button onclick="closeMe()"&Close&/button&
设置Webview窗口的滑屏操作手势
void wobj.drag(options, otherView, callback);
将Webview窗口的左右滑动手势关联到其它Webview窗口,可实现滑动切换显示Webview的动画效果(如Tab页面切换效果)。
注意:滑屏操作会改变窗口位置(如left值等),如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内,如setStyle({left:'0px'});。
必选 当前Webview窗口操作手势配置参数
otherView:
可选 操作手势关联的窗口配置参数
可选 滑屏操作回调函数
在滑屏手势操作过程中触发,一次滑屏操作至少会触发3次回调事件(开始、滑屏移动、结束)。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,wn=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
// 预创建新窗口(显示在可视区域外)
wn=plus.webview.create('/u/', '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();
document.addEventListener('plusready', plusReady, false);
左滑可打开新页面
void wobj.draw( bitmap, successCallback, errorCallback, options );
将Webview窗口的可视区域截屏并绘制到Bitmap图片对象中。
可选 要绘制的图片对象
如果图片中已经存在内容则覆盖,如果截屏绘制失败则保留之前的图片内容。
successCallback:
可选 截屏绘制操作成功回调
截屏绘制操作成功时调用。
errorCallback:
可选 截屏绘制操作失败回调
截屏绘制操作失败时调用,并返回失败信息。
可选 截屏绘制操作参数
设置控制截屏绘制区域、是否检测白屏等。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 截屏绘制
var bitmap=
function captureWebview() {
bitmap = new plus.nativeObj.Bitmap('test');
// 将webview内容绘制到Bitmap对象中
ws.draw(bitmap,function(){
console.log('截屏绘制图片成功');
},function(e){
console.log('截屏绘制图片失败:'+JSON.stringify(e));
截屏绘制Webview窗口&br/&
&button onclick="captureWebview()"&Draw&/button&
结束Webview窗口的下拉刷新
void wobj.endPullToRefresh();
关闭下拉刷新效果,恢复到开始下拉刷新之前的效果。
: 无示例:
&!DOCTYPE HTML&
&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"&
// 扩展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();
document.addEventListener('plusready', plusReady, false);
// DOM构建完成获取列表元素
document.addEventListener('DOMContentLoaded', function(){
list=document.getElementById('list');
// 刷新页面
function onRefresh(){
setTimeout(function(){
var item=document.createElement('li');
item.innerHTML='&span&New Item '+(new Date())+'&/span&';
list.insertBefore(item,list.firstChild);
ws.endPullToRefresh();
&style type="text/css"&
padding: 1
border-bottom: 1px solid #
li:active {
background: #f4f4f4;
&ul id="list" style="list-style: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&
在Webview窗口中执行JS脚本
void wobj.evalJS( js );
将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。
必选 要在窗口中运行的脚本字符串
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
ws.append( embed );
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 在Webview窗口中执行JS脚本
function evalJS() {
embed.evalJS('alert("evalJS: "+location.href);');
在Webview窗口中执行JS脚本
&button onclick="evalJS()"&evalJS&/button&
前进到上次加载的页面
void wobj.forward();
Webview窗口历史记录操作,前进到窗口上次加载的HTML页面。
如果窗口历史记录中没有可前进的页面则不触发任何操作。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var embed=
// H5 plus事件处理
function plusReady(){
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
plus.webview.currentWebview().append( embed );
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 返回上次页面
function goBack() {
embed.back();
// 前进到上次页面
function goForward() {
embed.forward();
前进到上次加载的页面
&button onclick="goBack()"&Back&/button&
&button onclick="goForward()"&Forward&/button&
获取Webview窗口的收藏参数
WebviewFavoriteOptions wobj.getFavoriteOptions();
获取Webview窗口的收藏参数,如收藏页面的标题、图标、地址等。
获取Webview窗口的收藏参数,如果未设置则返回null。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
ws.setFavoriteOptions({title:'收藏页标题',href:'http://www.dcloud.io/'});
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取窗口的分享参数
function getFavoriteOptions(){
var t = ws.getFavoriteOptions();
alert(t?"未设置":JSON.stringify(t));
&body style="text-align:"&
获取Webview窗口的收藏参数&br/&
&button onclick="getFavoriteOptions()"&获取收藏参数&/button&
获取Webview窗口的分享参数
WebviewShareOptions wobj.getShareOptions();
获取Webview窗口的分享参数,如分享的标题、图标、链接地址等。
: 获取Webview窗口的分享参数示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
ws.setShareOptions({title:'分享的标题',href:'http://www.dcloud.io/'});
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取窗口的分享参数
function getShareOptions(){
var t = ws.getShareOptions();
alert(t?"未设置":JSON.stringify(t));
&body style="text-align:"&
获取Webview窗口的分享参数&br/&
&button onclick="getShareOptions()"&获取分享参数&/button&
获取Webview窗口的样式
WebviewStyles wobj.getStyle();
获取Webview窗口的样式属性,如窗口位置、大小等信息。
: WebviewStyles对象示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取Webview窗口的样式
function getStyle() {
var style=ws.getStyle();
alert( JSON.stringify(style) );
获取Webview窗口的样式
&button onclick="getStyle()"&getStyle&/button&
获取Webview窗口的原生子View控件对象
Array&plus.nativeObj.View& wobj.getSubNViews();
创建Webview窗口的所有原生子View控件。
可以在创建窗口时设置其subNViews属性自动创建(应用首页可通过manfest.json中的plus-&launchwebview-&subNNViews节点配置创建);
也可以通过Webview窗口的append方法将已经创建的原生View控件添加为其子。
: 原生View控件对象数组,如果没有原生子View控件则返回空数组示例:
&!DOCTYPE html&
&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();
document.addEventListener('plusready', plusReady, false);
var subNViews=
// 创建带原生子View控件的Webview窗口
function createWebview(){
nw=nw||plus.webview.create('/u/', '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(){
}, 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');
Webview窗口的子View控件&br/&
&button onclick="createWebview()"&Create&/button&&br/&
&button onclick="updateTopView()"&更新顶部View控件&/button&
&button onclick="updateBottomView()"&更新底部View控件&/button&
获取Webview窗口加载HTML页面的标题
String wobj.getTitle();
标题为HTML页面head节点下title节点中的文本内容,当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的标题。
如果HTML页面没有使用title节点来设置标题,则返回空字符串。
: 窗口加载页面的标题示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'6px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取Webview窗口的标题
function getTitle() {
alert( "标题为:"+embed.getTitle() );
获取Webview窗口加载HTML页面的标题
&button onclick="getTitle()"&getTitle&/button&
获取Webview窗口的标题栏控件对象
plus.nativeObj.View wobj.getTitleNView();
创建Webview窗口时设置其titleNView属性时则自动创建标题栏控件,应用首页可通过manfest.json中的plus-&launchwebview-&titleNView节点配置创建标题栏控件。
可通过此方法获取Webview窗口创建的标题栏控件,对象类型为plus.nativeObj.View,可通过调用其drawBitmap/drawRect/drawText方法绘制更新内容来实现自定义样式。
: 原生View控件对象示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
wn=plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取Webview窗口的标题栏控件对象
function getTitleNView() {
var nb=wn.getTitleNView();
nb.drawText('返回', {'top':'0px','left':'0px','width':'96px','height':'100%'});
wn.show();
获取Webview窗口的标题栏控件对象&br/&
&button onclick="getTitleNView()"&更新标题栏控件对象&/button&
获取Webview窗口加载HTML页面的地址
String wobj.getURL();
当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的地址。
: 窗口加载页面的URL地址示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取Webview窗口加载HTML页面的地址
function getURL() {
alert( "页面地址为:"+embed.getURL() );
获取Webview窗口加载HTML页面的地址
&button onclick="getURL()"&getURL&/button&
隐藏Webview窗口
void wobj.hide( aniHide, duration, extras );
隐藏Webview窗口可保存已加载HTML页面的上下文数据,能降低应用使用的系统资源,通过show方法可将隐藏的Webview窗口显示出来。
可选 隐藏Webview窗口动画效果
如果没有指定隐藏窗口动画,则使用默认动画效果“none”。
可选 隐藏Webview窗口的动画持续时间
单位为ms,默认为窗口show方法设定的动画时间。
可选 隐藏Webview窗口扩展参数
可用于指定Webview窗口动画是否使用图片加速。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 隐藏Webview窗口
function hideWebview() {
embed.hide();
隐藏Webview窗口
&button onclick="hideWebview()"&hide&/button&
是否拦截Webview窗口的触屏事件
void wobj.interceptTouchEvent(intercept);
拦截后触屏事件不再传递,否则传递给View控件下的其它窗口处理。
Webview窗口默认拦截所有触屏事件。
intercept:
可选 是否拦截触屏事件
true表示拦截触屏事件,false表示不拦截触屏事件(透传事件给其它窗口处理)。
默认值为true。
: 无平台支持:
&!DOCTYPE HTML&
&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"&
// H5 plus事件处理
function plusReady(){
wv = plus.webview.currentWebview();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 拦截触屏事件
function interceptEvent(){
wv.interceptTouchEvent(true);
// 不拦截触屏事件
function uninterceptEvent(){
wv.interceptTouchEvent(false);
是否拦截Webview窗口的触屏事件&br/&
&button onclick="uninterceptEvent()"&不拦截触屏事件&/button&&br/&
&button onclick="interceptEvent()"&拦截触屏事件&/button&&br/&
查询Webview窗口是否开启硬件加速
Boolean wobj.isHardwareAccelerated();
若Webview窗口已经开启硬件加速则返回true,否则返回false。
: Webview窗口是否开启硬件加速平台支持:
5+ Runtime会根据当前设备环境来决定是否开启硬件加速,也可通过WebviewStyles对象的hardwareAccelerated属性来强制设置是否开启硬件加速。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 查询Webview窗口是否开启硬件加速
function isHardwareAccelerated() {
alert('是否开启硬件加速:'+ws.isHardwareAccelerated());
查询Webview窗口是否开启硬件加速
&button onclick="isHardwareAccelerated()"&isHardwareAccelerated&/button&
查询Webview窗口是否可见
Boolean wobj.isVisible();
若Webview窗口已经显示(调用过show方法,即使被其它窗口挡住了也认为已显示)则返回true,若Webview窗口被隐藏则返回false。
: Webview窗口是否可见示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 查询Webview窗口是否可见
function visibleWebview() {
alert('是否可见:'+embed.isVisible());
// 隐藏Webview窗口
function hideWebview() {
embed.hide();
查询Webview窗口是否可见
&button onclick="visibleWebview()"&isVisible&/button&
&button onclick="hideWebview()"&hide&/button&
监听页面开始加载资源
void wobj.listenResourceLoading(options, callback);
Webview加载资源时,如果满足options参数中定义的条件,则触发callback回调。
此方法仅触发回调事件,不会阻止资源的加载。
可选 监听加载资源的参数
可选 监听加载资源的回调函数
: 无平台支持:
5+APP需要选择“解压资源后运行”模式后才能监听加载资源。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,nw=
// H5 plus事件处理
function plusReady(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 监听页面加载资源
function listenResourceLoading() {
var wv=plus.webview.create('/u/');
// 监听到页面加载图片资源时显示({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');
监听页面开始加载资源
&button onclick="listenResourceLoading()"&加载图片资源时显示窗口&/button&
加载新HTML数据
void wobj.loadData( data );
触发Webview窗口加载HTML页面数据,如果HTML数据无效将导致页面加载失败。
必选 要加载的HTML数据
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 加载新HTML数据
function loadHtmlData() {
embed.loadData( '&html&&body&Hello! loadData!&/body&&/html&' );
加载新HTML数据
&button onclick="loadHtmlData()"&loadData&/button&
加载新URL页面
void wobj.loadURL(url, additionalHttpHeaders);
触发Webview窗口从新的URL地址加载页面,如果url地址无效将导致页面显示失败。
必选 要加载的页面URL地址
additionalHttpHeaders:
可选 窗口加载URL页面时额外添加的HTTP请求头数据
仅对加载此次URL地址时有效。
如果HTTP请求头中已经包含需要额外添加的头数据,则添加的请求数据覆盖默认值。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 加载新URL页面
function loadHtmlUrl() {
embed.loadURL('/');
加载新URL页面
&button onclick="loadHtmlUrl()"&loadURL&/button&
获取Webview窗口对象的原生(Native.JS)实例对象
InstanceObject wobj.nativeInstanceObject();
Android平台返回Webview窗口对象的android.webkit.Webview实例对象,
iOS平台返回Webview窗口对象的UIWebview实例对象。
InstanceObject
Webview窗口对象的原生(Native.JS)实例对象。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
// 获取当前Webview实例的原生(Native.JS)实例对象
nws=plus.webview.currentWebview().nativeInstanceObject();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
获取Webview窗口对象的原生(Native.JS)实例对象
获取在当前Webview窗口中创建的所有窗口
Array[WebviewObject] wobj.opened();
返回从当前Webview中调用plus.webview.open或plus.webview.create创建的所有Webview窗口数组。
此窗口创建的Webview窗口对象数组,没有则返回空数组。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取在当前Webview窗口中创建的所有窗口
function openedWebview() {
var list=ws.opened();
for(var i=0;i&list.i++){
alert('opened['+i+']: '+list[i].getURL());
获取在当前Webview窗口中创建的所有窗口
&button onclick="openedWebview()"&opened&/button&
获取当前Webview窗口的创建者
WebviewObject wobj.opener();
创建者为调用plus.webview.open或plus.webview.create方法创建当前窗口的Webview窗口。
: 创建当前窗口的Webview窗口对象示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 取当前Webview窗口的创建者
function openerWebview() {
var wo=embed.opener();
alert('opener: '+wo.getURL());
获取当前Webview窗口的创建者
&button onclick="openerWebview()"&opener&/button&
拦截Webview窗口的资源加载
void wobj.overrideResourceRequest(options);
根据区配规则拦截Webview窗口加载资源的URL地址,重定向到其它资源地址(暂仅支持本地地址)。
注意:多次调用overrideResourceRequest时仅以最后一次调用设置的参数值生效。
可选 拦截URL资源加载的参数
: 无平台支持:
5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。
不限定拦截当前Webview窗口加载的资源,而是拦截应用中所有Webview窗口加载的资源。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,nw=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
// 拦截Webview窗口的资源请求
nw=plus.webview.create('/u/');
nw.overrideResourceRequest([{match:'/crop.121.80.980.980.180/be8dcc14gw1e7lz65y6g3j20uo0uoq4r.jpg',redirect:'_www/logo.png'}]);
nw.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
拦截Webview窗口的资源加载
拦截Webview窗口的URL请求
void wobj.overrideUrlLoading(options, callback);
拦截URL请求后,Webview窗口将不会跳转到新的URL地址,此时将通过callback回调方法返回拦截的URL地址(可新开Webview窗口加载URL页面等)。
此方法只能拦截窗口的网络超链接跳转(包括调用loadURL方法触发的跳转),不可拦截页面请求资源请求(如加载css/js/png等资源的请求)。
注意:多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。
可选 拦截URL请求的参数
可选 拦截URL请求的回调函数
: 无平台支持:
5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,nw=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
nw=plus.webview.create('/u/');
nw.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 拦截Webview窗口的URL请求
function overrideUrl() {
// 拦截所有页面跳转,可使用参数拦截域名之外的跳转({mode:'allow',match:'.*weibo\.com/.*'})
nw.overrideUrlLoading({mode:'reject'}, function(e){
console.log('reject url: '+e.url);
拦截Webview窗口的URL请求
&button onclick="overrideUrl()"&overrideUrlLoading&/button&
获取当前Webview窗口的父窗口
WebviewObject wobj.parent();
Webview窗口作为子窗口添加(Webview.append)到其它Webview窗口中时有效,这时其它Webview窗口为父窗口。
: 父Webview窗口对象,没有则返回null。示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
ws.append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 获取当前Webview窗口的父窗口
function parentWebview() {
var wp=embed.parent();
alert( "parent: "+wp.getURL() );
获取当前Webview窗口的父窗口
&button onclick="parentWebview()"&parent&/button&
重新加载Webview窗口显示的HTML页面
void wobj.reload( force );
触发Webview窗口重新加载当前显示的页面内容。
如果当前HTML页面未加载完则停止并重新加载,如果当前Webview窗口没有加载任何页面则无响应。
必选 是否强制不使用缓存
为加速HTML页面加载速度,默认在重新加载时会使用缓存,若force设置为true则不使用缓存,重新从URL地址加载所有页面内容。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.show();
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 重新加载Webview窗口显示的HTML页面
function reloadWebview() {
embed.reload(true);
重新加载Webview窗口显示的HTML页面
&button onclick="reloadWebview()"&reload&/button&
重置Webview窗口的回弹位置
void wobj.resetBounce();
开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置。
这时需要调用此方法来重置窗口的回弹位置,窗口将采用动画方式回弹到其初始显示的位置。
: 无平台支持:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 重置窗口回弹位置
function resetBounce(){
ws.resetBounce();
&body style="text-align:"&
&br/&&br/&&br/&
设置Webview窗口的回弹效果&br/&
回弹后显示停靠到44px的位置&br/&&br/&
&button onclick="resetBounce()"&重置回弹位置&/button&
&br/&&br/&&br/&
*暂仅支持顶部的回弹效果*
恢复Webview控件显示内容
void wobj.restore();
恢复调用animate方法改变Webview控件的内容,更新至动画前显示的内容。
: 无示例:
&!DOCTYPE HTML&
&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"&
// H5 plus事件处理
function plusReady(){
wv = plus.webview.currentWebview();
if(window.plus){
plusReady();
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();
Webview窗口内容动画&br/&
&button onclick="animateWebview()"&内容动画&/button&&br/&
&button onclick="restoreWebview()"&内容恢复&/button&&br/&
移除子Webview窗口
void wobj.remove( webview );
从当前Webview窗口移除指定的子Webview窗口,若指定的webview对象不是当前窗口的子窗口则无任何作用。
移除后子Webview窗口不会关闭,需要调用其close方法才能真正关闭并销毁。
必选 要移除的Webview窗口
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
ws.append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 移除子Webview窗口
function removeWebview() {
ws.remove(embed);
embed.close();
移除子Webview窗口
&button onclick="removeWebview()"&remove&/button&
移除Webview窗口事件监听器
void wobj.removeEventListener( event, listener );
从Webview窗口移除通过addEventListener方法添加的事件监听器,若没有查找到对应的事件监听器,则无任何作用。
必选 要移除的事件类型
必选 要移除监听函数对象
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
embed.addEventListener('loaded', embedLoaded, false);
ws.append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 页面跳转监听器
function embedLoaded(e){
alert('Loaded: '+embed.getURL());
// 移除Webview窗口事件监听器
function removeEvent() {
embed.removeEventListener('loaded', embedLoaded);
移除Webview窗口事件监听器
&button onclick="removeEvent()"&removeEventListener&/button&
从父窗口中移除
void wobj.removeFromParent();
从所属的父Webview窗口移除,如果没有父窗口,则无任何作用。
从父窗口中移除后子Webview窗口不会关闭,需要调用其close方法才能真正关闭并销毁。
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
var ws=null,embed=
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
embed=plus.webview.create('/u/', '', {top:'46px',bottom:'0px'});
ws.append(embed);
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
// 从父窗口中移除
function removeFromeWebview() {
embed.removeFromParent();
embed.close();
从父窗口中移除
&button onclick="removeFromeWebview()"&removeFromParent&/button&
设置Webview窗口的回弹效果
void wobj.setBounce( style );
开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置(可通过style设置)。
拖拽窗口内容时页面显示Webview窗口的背景色,默认为透明,此时显示Webview下面的内容,利用这个特点可以实现自定下拉刷新特效。
必选 Webview窗口回弹样式参数
可设置窗口的回弹效果支持的方向,自动回弹后停靠的位置等参数。
: 无平台支持:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
ws=plus.webview.currentWebview();
ws.setBounce({position:{top:'100px'},changeoffset:{top:'0px'}});
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
&body style="text-align:"&
&br/&&br/&&br/&
设置Webview窗口的回弹效果&br/&&br/&&br/&
*暂仅支持顶部的回弹效果*
设置Webview窗口是否阻塞加载页面中使用的网络图片
void wobj.setBlockNetworkImage( block );
必选 是否阻塞加载网络图片
true表示不加载页面中使用的网络图片,false表示加载也页面中使用的网络图片。
: 无平台支持:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Example&/title&
&script type="text/javascript"&
// H5 plus事件处理
function plusReady(){
if(window.plus){
plusReady();
document.addEventListener('plusready', plusReady, false);
function blockOpen(){
// 阻塞网络图片模式打开页面
var w=plus.webview.create('/u/', 'test', {blockNetworkImage:true});
w.addEventListener('loaded', function(){
w.show('slide-in-right', 300);
// 加载网络图片
w.setBlockNetworkImage(false);
}, false);
显示窗口后再加载网络图片&br/&
&button onclick="blockOpen()"&打开页面&/button&
设置HTML内容是否可见
void wobj.setContentVisible( visible );
设置HTML内容不可见后,将显示Webview窗口的背景色。
必选 设置页面是否可见,true表示可见,false表示不可见
: 无示例:
&!DOCTYPE html&
&meta charset="utf-8"&
&title&Webview Exampl

我要回帖

更多关于 js 偏移量 的文章

 

随机推荐