# [webview]() Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。 ### 方法: - [all](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.all): 获取所有Webview窗口 - [close](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.close): 关闭Webview窗口 - [create](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.create): 创建新的Webview窗口 - [currentWebview](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.currentWebview): 获取当前窗口的WebviewObject对象 - [getWebviewById](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.getWebviewById): 查找指定标识的窗口 - [hide](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.hide): 隐藏Webview窗口 - [open](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.open): 创建并打开Webview窗口 - [show](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.show): 显示Webview窗口 ### 对象: - [AnimationTypeShow](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeShow): 一组用于定义页面或控件显示动画效果 - [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeClose): 一组用于定义页面或控件关闭的动画效果 - [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject): Webview窗口对象,用于操作加载HTML页面的窗口 - [WebviewBounceStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewBounceStyle): Webview窗口回弹样式 - [WebviewDock](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewDock): 原生控件在窗口中停靠的方式 - [WebviewEvent](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewEvent): Webview窗口事件 - [WebviewRefreshStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewRefreshStyle): Webview窗口下拉刷新样式 - [WebviewPosition](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewPosition): 原生控件在窗口中显示的位置 - [WebviewStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle): JSON对象,原生窗口设置参数的对象 - [WebviewTransform](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewTransform): 一组用于定义页面或控件变形的属性 - [WebviewTransition](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewTransition): 一组用于定义页面或控件转换效果的属性 ### 回调方法: - [BounceEventCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.BounceEventCallback): Webview窗口回弹事件的回调函数 - [EventCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.EventCallback): Webview窗口事件的回调函数 - [PopGestureCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.PopGestureCallback): Webview窗口侧滑事件的回调函数 - [HistoryQueryCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.HistoryQueryCallback): 历史记录记录查询的回调函数 - [RefreshCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.RefreshCallback): Webview窗口刷新事件的回调函数 - [ShowedCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.ShowedCallback): Webview窗口显示完成的回调函数 # [all]() 获取所有Webview窗口 ~~~ Array[WebviewObject] plus.webview.all(); ~~~ ### 说明: 获取应用中已创建的所有Webview窗口,包括所有未显示的Webview窗口。 返回WebviewObject对象数组中其打开先后顺序排列,即数组中第一个WebviewObject对象用是加载应用的入口页面。 ### 参数: 无 ### 返回值: Array[ [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) ] : 应用中创建的所有Webview窗口对象数组。 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 获取所有Webview窗口 var wvs=plus.webview.all(); for(var i=0;i<wvs.length;i++){ console.log("webview"+i+": "+wvs[i].getURL()); } } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 获取所有Webview窗口 </body> </html> ~~~ # [close]() 关闭Webview窗口 ~~~ void plus.webview.close( id_wvobj, aniClose, duration ); ~~~ ### 说明: 关闭已经打开的Webview窗口,需先获取窗口对象或窗口id,并可指定关闭窗口的动画及动画持续时间。 ### 参数: - id_wvobj: *( String | [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) ) 必选 *要关闭Webview窗口id或窗口对象 若操作窗口对象已经关闭,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。 - aniClose: *( [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeClose) ) 可选 *关闭Webview窗口的动画效果 如果没有指定窗口动画,则使用默认值“auto”,即使用显示时设置的窗口动画相对应的关闭动画。 - duration: *( Number ) 可选 *关闭Webview窗口动画的持续时间 单位为ms,如果没有设置则使用显示窗口动画时间。 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 关闭自身窗口 function closeme(){ var ws=plus.webview.currentWebview(); plus.webview.close(ws); } </script> </head> <body> 关闭Webview窗口<br/> <button onclick="closeme()">close</button> </body> </html> ~~~ # [create]() 创建新的Webview窗口 ~~~ WebviewObject plus.webview.create( url, id, styles, extras ); ~~~ ### 说明: 创建Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后需要调用show方法才能将Webview窗口显示出来。 ### 参数: - url: *( String ) 可选 *新窗口加载的HTML页面地址 新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址。 - id: *( String ) 可选 *新窗口的标识 窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 - styles: *( [WebviewStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle) ) 可选 *创建Webview窗口的样式(如窗口宽、高、位置等信息) - extras: *( JSON ) 可选 *创建Webview窗口的额外扩展参数 值为JSON类型,设置扩展参数后可以直接通过Webview的点(“.”)操作符获取扩展参数属性值,如: var w=plus.webview.create('url.html','id',{},{preload:"preload webview"}); // 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview” ### 返回值: [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) : Webview窗口对象 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 创建并显示新窗口 function create(){ var w = plus.webview.create( "http://weibo.com/dhnetwork" ); w.show(); // 显示窗口 } </script> </head> <body> 创建新的Webview窗口<br/> <button onclick="create()">Create</button> </body> </html> ~~~ # [currentWebview]() 获取当前窗口的WebviewObject对象 ~~~ WebviewObject plus.webview.currentWebview(); ~~~ ### 说明: 获取当前页面所属的Webview窗口对象。 ### 参数: 无 ### 返回值: [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) : Webview窗口对象 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ var ws=plus.webview.currentWebview(); console.log( "当前Webview窗口:"+ws.getURL() ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 获取自身Webview窗口 </body> </html> ~~~ # [getWebviewById]() 查找指定标识的窗口 ~~~ WebviewObject plus.webview.getWebviewById( id ); ~~~ ### 说明: 在已创建的窗口列表中查找指定标识的Webview窗口并返回。 若没有查找到指定标识的窗口则返回null,若存在多个相同标识的Webview窗口,则返回第一个创建的Webview窗口。 如果要获取应用入口页面所属的Webview窗口,其标识为应用的%APPID%,可通过plus.runtime.appid获取。 ### 参数: - id: *( String ) 必选 *要查找的Webview窗口标识 ### 返回值: [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) : Webview窗口对象 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 查找应用首页窗口对象 var h=plus.webview.getWebviewById( plus.runtime.appid ); console.log( "应用首页Webview窗口:"+h.getURL() ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 查找指定标识的窗口 </body> </html> ~~~ # [hide]() 隐藏Webview窗口 ~~~ void plus.webview.hide( id_wvobj, aniHide, duration ); ~~~ ### 说明: 根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。 ### 参数: - id_wvobj: *( String | [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) ) 必选 *要隐藏的Webview窗口id或窗口对象 使用窗口对象时,若窗口对象已经隐藏,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先打开的,若没有查找到对应id的WebviewObject对象,则无任何效果。 - aniHide: *( [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeClose) ) 可选 *隐藏Webview窗口的动画效果 如果没有指定窗口动画,则使用默认动画效果“none”。 - duration: *( Number ) 可选 *隐藏Webview窗口动画的持续时间 单位为ms,如果没有设置则使用默认窗口动画时间。 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 隐藏自身窗口 function hideeme(){ plus.webview.hide( plus.webview.currentWebview() ); } </script> </head> <body> 隐藏Webview窗口<br/> <button onclick="hideeme()">Hide</button> </body> </html> ~~~ # [open]() 创建并打开Webview窗口 ~~~ WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB ); ~~~ ### 说明: 创建并显示Webview窗口,用于加载新的HTML页面,可通过styles设置Webview窗口的样式,创建完成后自动将Webview窗口显示出来。 ### 参数: - url: *( String ) 可选 *打开窗口加载的HTML页面地址 新打开Webview窗口要加载的HTML页面地址,可支持本地地址和网络地址。 - id: *( String ) 可选 *打开窗口的标识 窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口,为了保持窗口标识的唯一性,应该避免使用相同的标识来创建多个Webview窗口。 - styles: *( [WebviewStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle) ) 可选 *创建Webview窗口的样式(如窗口宽、高、位置等信息) - aniShow: *( [AnimationTypeShow](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeShow) ) 可选 *显示Webview窗口的动画效果 如果没有指定窗口动画,则使用默认无动画效果“none”。 - duration: *( Number ) 可选 *显示Webview窗口动画的持续时间 单位为ms,如果没有设置则使用默认窗口动画时间600ms。 - showedCB: *( [ShowedCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.ShowedCallback) ) 可选 *Webview窗口显示完成的回调函数 当指定Webview窗口动画时,在动画执行完毕,窗口完全显示时触发回调。 ### 返回值: [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) : WebviewObject窗口对象 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 创建并显示新窗口 function openWebview(){ var w = plus.webview.open( "http://weibo.com/dhnetwork" ); } </script> </head> <body> 打开Webview窗口<br/> <button onclick="openWebview()">Open</button> </body> </html> ~~~ # [show]() 显示Webview窗口 ~~~ void plus.webview.show( id_wvobj, aniShow, duration, showedCB ); ~~~ ### 说明: 显示已创建或隐藏的Webview窗口,需先获取窗口对象或窗口id,并可指定显示窗口的动画及动画持续时间。 ### 参数: - id_wvobj: *( String | [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) ) 必选 *要显示Webview窗口id或窗口对象 若操作Webview窗口对象显示,则无任何效果。 使用窗口id时,则查找对应id的窗口,如果有多个相同id的窗口则操作最先创建的窗口,若没有查找到对应id的WebviewObject对象,则无任何效果。 - aniShow: *( [AnimationTypeShow](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeShow) ) 可选 *显示Webview窗口的动画效果 如果没有指定窗口动画类型,则使用默认值“auto”,即自动选择上一次显示窗口的动画效果,如果之前没有显示过,则使用“none”动画效果。 - duration: *( Number ) 可选 *显示Webview窗口动画的持续时间 单位为ms,如果没有设置则使用默认窗口动画时间600ms。 - showedCB: *( [ShowedCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.ShowedCallback) ) 可选 *Webview窗口显示完成的回调函数 当指定Webview窗口动画时,在动画执行完毕,窗口完全显示时触发回调。 ### 返回值: [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) : Webview窗口对象 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 创建并显示新窗口 function create(){ var w = plus.webview.create( "http://weibo.com/dhnetwork" ); plus.webview.show( w ); // 显示窗口 } </script> </head> <body> 显示Webview窗口<br/> <button onclick="create()">Create</button> </body> </html> ~~~ # [AnimationTypeShow]() 一组用于定义页面或控件显示动画效果 ### 常量: - "auto": *(String 类型 )*自动选择动画效果 自动选择动画效果,使用上次显示窗口设置的动画效果,如果是第一次显示则默认动画效果“none”。 - "none": *(String 类型 )*无动画效果 立即显示页面,无任何动画效果,页面显示默认的动画效果。 对应关闭动画"none"。 - "slide-in-right": *(String 类型 )*从右侧横向滑动效果 页面从屏幕右侧外向内横向滑动显示。 对应关闭动画"slide-out-right"。 - "slide-in-left": *(String 类型 )*从左侧横向滑动效果 页面从屏幕左侧向右横向滑动显示。 对应关闭动画"slide-out-left"。 - "slide-in-top": *(String 类型 )*从上侧竖向滑动效果 页面从屏幕上侧向下竖向滑动显示。 对应关闭动画"slide-out-top"。 - "slide-in-bottom": *(String 类型 )*从下侧竖向滑动效果 页面从屏幕下侧向上竖向滑动显示。 对应关闭动画"slide-out-bottom"。 - "fade-in": *(String 类型 )*从透明到不透明逐渐显示效果 页面从完全透明到不透明逐渐显示。 对应关闭动画"fade-out"。 - "zoom-out": *(String 类型 )*从小到大逐渐放大显示效果 页面在屏幕中间从小到大逐渐放大显示。 对应关闭动画"zoom-in"。 - "zoom-fade-out": *(String 类型 )*从小到大逐渐放大并且从透明到不透明逐渐显示效果 页面在屏幕中间从小到大逐渐放大并且从透明到不透明逐渐显示。 对应关闭动画"zoom-fade-in"。 - "pop-in": *(String 类型 )*从右侧平移入栈动画效果 页面从屏幕右侧滑入显示,同时上一个页面带阴影效果从屏幕左侧滑出隐藏。 对应关闭动画"pop-out"。 ### 平台支持 - Android - ALL (不支持): 暂不支持此动画效果 - iOS - 5.0+ (支持) # [AnimationTypeClose]() 一组用于定义页面或控件关闭的动画效果 ### 常量: - "auto": *(String 类型 )*自动选择动画效果 自动选择显示窗口相对于的动画效果。 - "none": *(String 类型 )*无动画 立即关闭页面,无任何动画效果。 - "slide-out-right": *(String 类型 )*横向向右侧滑出屏幕动画 页面从屏幕中横向向右侧滑动到屏幕外关闭。 - "slide-out-left": *(String 类型 )*横向向左侧滑出屏幕动画 页面从屏幕中横向向左侧滑动到屏幕外关闭。 - "slide-out-top": *(String 类型 )*竖向向上侧滑出屏幕动画 页面从屏幕中竖向向上侧滑动到屏幕外关闭。 - "slide-out-bottom": *(String 类型 )*竖向向下侧滑出屏幕动画 页面从屏幕中竖向向下侧滑动到屏幕外关闭。 - "fade-out": *(String 类型 )*从不透明到透明逐渐隐藏动画 页面从不透明到透明逐渐隐藏关闭。 - "zoom-in": *(String 类型 )*从大逐渐缩小关闭动画 页面逐渐向页面中心缩小关闭。 - "zoom-fade-in": *(String 类型 )*从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画 页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。 - "pop-out": *(String 类型 )*从右侧平移出栈动画效果,仅iOS平台支持 页面从屏幕右侧滑出消失,同时上一个页面带阴影效果从屏幕左侧滑入显示。 ### 平台支持 - Android - ALL (不支持): 暂不支持此动画效果 - iOS - 5.0+ (支持) # [WebviewObject]() Webview窗口对象,用于操作加载HTML页面的窗口 ### 属性: - [id](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.id): Webview窗口的标识 ### 方法: - [addEventListener](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.addEventListener): 添加事件监听器 - [append](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.append): 在Webview窗口中添加子窗口 - [appendJsFile](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.appendJsFile): 添加Webview窗口预加载js文件 - [back](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.back): 后退到上次加载的页面 - [canBack](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.canBack): 查询Webview窗口是否可后退 - [canForward](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.canForward): 查询Webview窗口是否可前进 - [children](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.children): 获取Webview窗口的所有子Webview窗口 - [clear](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.clear): 清空原生Webview窗口加载的内容 - [close](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.close): 关闭Webview窗口 - [evalJS](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.evalJS): 在Webview窗口中执行JS脚本 - [forward](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.forward): 前进到上次加载的页面 - [getStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.getStyle): 获取Webview窗口的样式 - [getTitle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.getTitle): 获取Webview窗口加载HTML页面的标题 - [getURL](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.getURL): 获取Webview窗口加载HTML页面的地址 - [hide](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.hide): 隐藏Webview窗口 - [isVisible](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.isVisible): 查询Webview窗口是否可见 - [loadData](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.loadData): 加载新HTML数据 - [loadURL](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.loadURL): 加载新URL页面 - [nativeInstanceObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.nativeInstanceObject): 获取Webview窗口对象的原生(Native.JS)实例对象 - [opened](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.opened): 获取在当前Webview窗口中创建的所有窗口 - [opener](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.opener): 获取当前Webview窗口的创建者 - [parent](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.parent): 获取当前Webview窗口的父窗口 - [reload](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.reload): 重新加载Webview窗口显示的HTML页面 - [resetBounce](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.resetBounce): 重置Webview窗口的回弹位置 - [remove](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.remove): 移除子Webview窗口 - [removeEventListener](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.removeEventListener): 移除Webview窗口事件监听器 - [removeFromParent](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.removeFromParent): 从父窗口中移除 - [setBounce](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.setBounce): 设置Webview窗口的回弹效果 - [setBlockNetworkImage](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.setBlockNetworkImage): 设置Webview窗口是否阻塞加载页面中使用的网络图片 - [setContentVisible](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.setContentVisible): 设置HTML内容是否可见 - [setPullToRefresh](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.setPullToRefresh): 设置Webview窗口的下拉刷新效果 - [setStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.setStyle): 设置Webview窗口的样式 - [setJsFile](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.setJsFile): 设置预加载的JS文件 - [show](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.show): 显示Webview窗口 - [stop](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.stop): 停止加载HTML页面内容 ### 事件: - [onclose](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.onclose): Webview窗口关闭事件 - [onerror](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.onerror): Webview窗口错误事件 - [onloaded](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.onloaded): Webview窗口页面加载完成事件 - [onloading](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject.onloading): Webview窗口页面开始加载事件 # [id]() Webview窗口的标识 ### 说明: String 类型 在打开或创建Webview窗口时设置,如果没有设置窗口标识,此属性值为undefined。 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <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(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> Webview窗口的标识<br/> </body> </html> ~~~ # [addEventListener]() 添加事件监听器 ~~~ wobj.addEventListener( event, listener, capture ); ~~~ ### 说明: 向Webview窗口添加事件监听器,当指定的事件发生时,将触发listener函数的执行。 可多次调用此方法向Webview添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。 ### 参数: - event: *( [WebviewEvent](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewEvent) ) 必选 *Webview窗口事件类型 - listener: *( [EventCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.EventCallback) ) 必选 *监听事件发生时执行的回调函数 - capture: *( Boolean ) 可选 *捕获事件流顺序,暂无效果 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } var nw=null; // 监听Webview窗口事件 function eventTest() { if(nw){return;} var w=plus.nativeUI.showWaiting() // 打开新窗口 nw=plus.webview.create( "http://weibo.com/dhnetwork" ); nw.addEventListener( "loaded", function(){ console.log( "New Window loaded!" ); nw.show(); // 显示窗口 w.close(); w=null; }, false ); } </script> </head> <body> 添加事件监听器<br/> <button onclick="eventTest()">Event Listener</button> </body> </html> ~~~ # [append]() 在Webview窗口中添加子窗口 ~~~ void wobj.append( webview ); ~~~ ### 说明: 将另一个Webview窗口作为子窗口添加到当前Webview窗口中,添加后其所有权归父Webview窗口,当父窗口关闭时子窗口自动关闭。 ### 参数: - webview: *( [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) ) 必选 *被添加的子Webview窗口对象 被添加的Webview窗口需通过plus.webview.create方法创建,并且不能调用其show方法进行显示。 父窗口显示时子窗口会自动显示,父窗口隐藏时子窗口也会自动隐藏。 ### 返回值: 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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); plus.webview.currentWebview().append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 在Webview窗口中添加子窗口 <button onclick="plus.webview.currentWebview().close();">Back</button> </body> </html> ~~~ # [appendJsFile]() 添加Webview窗口预加载js文件 ~~~ wobj.appendJsFile( file ); ~~~ ### 说明: 对于一些网络HTML页面,在无法修改HTML页面时可通过此方法自动加载本地js文件。 当Webview窗口跳转到新页面时也会自动加载指定的js执行,添加多个js文件将按照添加的先后顺序执行。 ### 参数: - file: *( String ) 必选 *窗口预加载的js文件地址 js文件路径只支持本地文件,应该使用扩展相对路径类型的文件,如"_www/preload.js"。 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> // H5 plus事件处理 function plusReady(){ var nw=plus.webview.create("http://weibo.com/dhnetwork"); nw.appendJsFile("_www/preload.js"); nw.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body> 添加Webview窗口预加载js文件 </body> </html> ~~~ # [back]() 后退到上次加载的页面 ~~~ void wobj.back(); ~~~ ### 说明: Webview窗口历史记录操作,后退到窗口上次加载的HTML页面。 如果窗口历史记录中没有可后退的页面则不触发任何操作。 ### 参数: 无 ### 返回值: 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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); plus.webview.currentWebview().append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 返回上次页面 function goBack() { embed.back(); } // 前进到上次页面 function goForward() { embed.forward(); } </script> </head> <body> 后退到上次加载的页面 <button onclick="goBack()">Back</button> <button onclick="goForward()">Forward</button> </body> </html> ~~~ # [canBack]() 查询Webview窗口是否可后退 ~~~ void wobj.canBack( queryCallback ); ~~~ ### 说明: Webview窗口历史记录查询操作,获取Webview是否可后退到历史加载的页面,结果通过queryCallback回调方法返回。 ### 参数: - queryCallback: *( [HistoryQueryCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.HistoryQueryCallback) ) 必选 *查询历史记录操作回调函数 ### 返回值: 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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); plus.webview.currentWebview().append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 是否可后退 function canBack() { embed.canBack( function(e){ console.log( "是否可返回:"+e.canBack ); }); } </script> </head> <body> 查询Webview窗口是否可后退 <button onclick="canBack()">canBack</button> </body> </html> ~~~ # [canForward]() 查询Webview窗口是否可前进 ~~~ void wobj.canForward( queryCallback ); ~~~ ### 说明: Webview窗口历史记录查询操作,获取Webview是否可前进到历史加载的页面,结果通过queryCallback回调方法返回。 ### 参数: - queryCallback: *( [HistoryQueryCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.HistoryQueryCallback) ) 必选 *查询历史记录操作回调函数 ### 返回值: 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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); plus.webview.currentWebview().append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 是否可前进 function canForward() { embed.canForward( function(e){ console.log( "是否可前进:"+e.canForward ); }); } </script> </head> <body> 查询Webview窗口是否可前进 <button onclick="canForward()">canForward</button> </body> </html> ~~~ # [children]() 获取Webview窗口的所有子Webview窗口 ~~~ Array[WebviewObject] wobj.children(); ~~~ ### 说明: 获取添加到Webview窗口中的所有子Webview窗口,如果没有子Webview窗口则返回空数组。 ### 参数: 无 ### 返回值: Array[ [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); plus.webview.currentWebview().append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 获取子Webview窗口 function listChildren() { var list=plus.webview.currentWebview().children(); for(var i=0;i<list.length;i++){ console.log( "Children["+i+"]: "+list[i].getURL() ); } } </script> </head> <body> 获取Webview窗口的所有子Webview窗口 <button onclick="listChildren()">Children</button> </body> </html> ~~~ # [clear]() 清空原生Webview窗口加载的内容 ~~~ void wobj.clear(); ~~~ ### 说明: 清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容。 ### 参数: 无 ### 返回值: 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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); plus.webview.currentWebview().append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 清空Webview窗口 function webviewClear() { embed.clear(); } </script> </head> <body> 清空原生Webview窗口加载的内容 <button onclick="webviewClear()">Clear</button> </body> </html> ~~~ # [close]() 关闭Webview窗口 ~~~ void wobj.close( aniClose, duration ); ~~~ ### 说明: 关闭并销毁Webview窗口,可设置关闭动画和动画持续时间。 ### 参数: - aniClose: *( [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeClose) ) 可选 *关闭Webview窗口动画效果 如果没有指定关闭窗口动画,则使用显示时设置的窗口动画相对应的关闭动画。 - duration: *( Number ) 可选 *关闭Webview窗口的动画持续时间 单位为ms,默认为窗口show方法设定的动画时间。 ### 返回值: 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> ~~~ # [evalJS]() 在Webview窗口中执行JS脚本 ~~~ void wobj.evalJS( js ); ~~~ ### 说明: 将JS脚本发送到Webview窗口中运行,可用于实现Webview窗口间的数据通讯。 ### 参数: - options: *( String ) 必选 *要在窗口中运行的脚本 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); ws.append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 在Webview窗口中执行JS脚本 function evalJS() { embed.evalJS("alert('evalJS: '+location.href);"); } </script> </head> <body> 在Webview窗口中执行JS脚本 <button onclick="evalJS()">evalJS</button> </body> </html> ~~~ # [forward]() 前进到上次加载的页面 ~~~ void wobj.forward(); ~~~ ### 说明: Webview窗口历史记录操作,前进到窗口上次加载的HTML页面。 如果窗口历史记录中没有可前进的页面则不触发任何操作。 ### 参数: 无 ### 返回值: 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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); plus.webview.currentWebview().append( embed ); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 返回上次页面 function goBack() { embed.back(); } // 前进到上次页面 function goForward() { embed.forward(); } </script> </head> <body> 前进到上次加载的页面 <button onclick="goBack()">Back</button> <button onclick="goForward()">Forward</button> </body> </html> ~~~ # [getStyle]() 获取Webview窗口的样式 ~~~ WebviewStyle wobj.getStyle(); ~~~ ### 说明: 获取Webview窗口的样式属性,如窗口位置、大小等信息。 ### 参数: 无 ### 返回值: [WebviewStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle) : WebviewStyle对象 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 获取Webview窗口的样式 function getStyle() { var style=ws.getStyle(); alert( JSON.stringify(style) ); } </script> </head> <body> 获取Webview窗口的样式 <button onclick="getStyle()">getStyle</button> </body> </html> ~~~ # [getTitle]() 获取Webview窗口加载HTML页面的标题 ~~~ String wobj.getTitle(); ~~~ ### 说明: 标题为HTML页面head节点下title节点中的文本内容,当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的标题。 如果HTML页面没有使用title节点来设置标题,则返回空字符串。 ### 参数: 无 ### 返回值: String : 窗口加载页面的标题 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 获取Webview窗口的标题 function getTitle() { alert( "标题为:"+embed.getTitle() ); } </script> </head> <body> 获取Webview窗口加载HTML页面的标题 <button onclick="getTitle()">getTitle</button> </body> </html> ~~~ # [getURL]() 获取Webview窗口加载HTML页面的地址 ~~~ String wobj.getURL(); ~~~ ### 说明: 当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的地址。 ### 参数: 无 ### 返回值: String : 窗口加载页面的URL地址 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 获取Webview窗口加载HTML页面的地址 function getURL() { alert( "页面地址为:"+embed.getURL() ); } </script> </head> <body> 获取Webview窗口加载HTML页面的地址 <button onclick="getURL()">getURL</button> </body> </html> ~~~ # [hide]() 隐藏Webview窗口 ~~~ void wobj.hide( aniHide, duration ); ~~~ ### 说明: 隐藏Webview窗口可保存已加载HTML页面的上下文数据,能降低应用使用的系统资源,通过show方法可将隐藏的Webview窗口显示出来。 ### 参数: - aniHide: *( [AnimationTypeClose](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeClose) ) 可选 *隐藏Webview窗口动画效果 如果没有指定隐藏窗口动画,则使用默认动画效果“none”。 - duration: *( Number ) 可选 *隐藏Webview窗口的动画持续时间 单位为ms,默认为窗口show方法设定的动画时间。 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 隐藏Webview窗口 function hideWebview() { embed.hide(); } </script> </head> <body> 隐藏Webview窗口 <button onclick="hideWebview()">hide</button> </body> </html> ~~~ # [isVisible]() 查询Webview窗口是否可见 ~~~ Boolean wobj.isVisible(); ~~~ ### 说明: 若Webview窗口已经显示则返回true,若Webview窗口被隐藏则返回false。 ### 参数: 无 ### 返回值: 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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 查询Webview窗口是否可见 function visibleWebview() { alert( "是否可见:"+embed.isVisible() ); } // 隐藏Webview窗口 function hideWebview() { embed.hide(); } </script> </head> <body> 查询Webview窗口是否可见 <button onclick="visibleWebview()">isVisible</button> <button onclick="hideWebview()">hide</button> </body> </html> ~~~ # [loadData]() 加载新HTML数据 ~~~ void wobj.loadData( data ); ~~~ ### 说明: 触发Webview窗口加载HTML页面数据,如果HTML数据无效将导致页面加载失败。 ### 参数: - data: *( String ) 必选 *要加载的HTML数据 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 加载新HTML数据 function loadHtmlData() { embed.loadData( '<html><body>Hello! loadData!</body></html>' ); } </script> </head> <body> 加载新HTML数据 <button onclick="loadHtmlData()">loadData</button> </body> </html> ~~~ # [loadURL]() 加载新URL页面 ~~~ void wobj.loadURL( url ); ~~~ ### 说明: 触发Webview窗口从新的URL地址加载页面,如果url地址无效将导致页面显示失败。 ### 参数: - url: *( String ) 必选 *要加载的页面URL地址 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 加载新URL页面 function loadHtmlUrl() { embed.loadURL( 'http://m.csdn.net/' ); } </script> </head> <body> 加载新URL页面 <button onclick="loadHtmlUrl()">loadURL</button> </body> </html> ~~~ # [nativeInstanceObject]() 获取Webview窗口对象的原生(Native.JS)实例对象 ~~~ InstanceObject wobj.nativeInstanceObject(); ~~~ ### 说明: Android平台返回Webview窗口对象的android.webkit.Webview实例对象, iOS平台返回Webview窗口对象的UIWebview实例对象。 ### 参数: 无 ### 返回值: 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> ~~~ # [opened]() 获取在当前Webview窗口中创建的所有窗口 ~~~ Array[WebviewObject] wobj.opened(); ~~~ ### 说明: 返回从当前Webview中调用plus.webview.open或plus.webview.create创建的所有Webview窗口数组。 ### 参数: 无 ### 返回值: Array[ [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 获取在当前Webview窗口中创建的所有窗口 function openedWebview() { var list=ws.opened(); for(var i=0;i<list.length;i++){ alert( "opened["+i+"]: "+list[i].getURL() ); } } </script> </head> <body> 获取在当前Webview窗口中创建的所有窗口 <button onclick="openedWebview()">opened</button> </body> </html> ~~~ # [opener]() 获取当前Webview窗口的创建者 ~~~ WebviewObject wobj.opener(); ~~~ ### 说明: 创建者为调用plus.webview.open或plus.webview.create方法创建当前窗口的Webview窗口。 ### 参数: 无 ### 返回值: [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show(); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 取当前Webview窗口的创建者 function openerWebview() { var wo=embed.opener(); alert( "opener: "+wo.getURL() ); } </script> </head> <body> 获取当前Webview窗口的创建者 <button onclick="openerWebview()">opener</button> </body> </html> ~~~ # [parent]() 获取当前Webview窗口的父窗口 ~~~ WebviewObject wobj.parent(); ~~~ ### 说明: Webview窗口作为子窗口添加(Webview.append)到其它Webview窗口中时有效,这时其它Webview窗口为父窗口。 ### 参数: 无 ### 返回值: [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); ws.append(embed); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 获取当前Webview窗口的父窗口 function parentWebview() { var wp=embed.parent(); alert( "parent: "+wp.getURL() ); } </script> </head> <body> 获取当前Webview窗口的父窗口 <button onclick="parentWebview()">parent</button> </body> </html> ~~~ # [reload]() 重新加载Webview窗口显示的HTML页面 ~~~ void wobj.reload( force ); ~~~ ### 说明: 触发Webview窗口重新加载当前显示的页面内容。 如果当前HTML页面未加载完则停止并重新加载,如果当前Webview窗口没有加载任何页面则无响应。 ### 参数: - force: *( Boolean ) 必选 *是否强制不使用缓存 为加速HTML页面加载速度,默认在重新加载时会使用缓存,若force设置为true则不使用缓存,重新从URL地址加载所有页面内容。 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); 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> ~~~ # [resetBounce]() 重置Webview窗口的回弹位置 ~~~ void wobj.resetBounce(); ~~~ ### 说明: 开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置。 这时需要调用此方法来重置窗口的回弹位置,窗口将采用动画方式回弹到其初始显示的位置。 ### 参数: 无 ### 返回值: void : 无 ### 平台支持: - Android - 2.2+ (支持) - iOS - ALL (不支持) ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); ws.setBounce({position:{top:"100px"},changeoffset:{top:"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> ~~~ # [remove]() 移除子Webview窗口 ~~~ void wobj.remove( webview ); ~~~ ### 说明: 从当前Webview窗口移除指定的子Webview窗口,若指定的webview对象不是当前窗口的子窗口则无任何作用。 移除后子Webview窗口不会关闭,需要调用其close方法才能真正关闭并销毁。 ### 参数: - webview: *( [WebviewObject](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewObject) ) 必选 *要移除的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://weibo.com/dhnetwork","",{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> ~~~ # [removeEventListener]() 移除Webview窗口事件监听器 ~~~ void wobj.removeEventListener( event, listener ); ~~~ ### 说明: 从Webview窗口移除通过addEventListener方法添加的事件监听器,若没有查找到对应的事件监听器,则无任何作用。 ### 参数: - event: *( [NWindowEvent](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.NWindowEvent) ) 必选 *要移除的事件类型 - listener: *( [EventCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.EventCallback) ) 必选 *要移除监听函数对象 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); 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> ~~~ # [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://weibo.com/dhnetwork","",{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> ~~~ # [setBounce]() 设置Webview窗口的回弹效果 ~~~ void wobj.setBounce( style ); ~~~ ### 说明: 开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置(可通过style设置)。 拖拽窗口内容时页面显示Webview窗口的背景色,默认为透明,此时显示Webview下面的内容,利用这个特点可以实现自定下拉刷新特效。 ### 参数: - style: *( WebviewBounceStyle ) 必选 *Webview窗口回弹样式参数 可设置窗口的回弹效果支持的方向,自动回弹后停靠的位置等参数。 ### 返回值: void : 无 ### 平台支持: - Android - 2.2+ (支持) - iOS - ALL (不支持) ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); ws.setBounce({position:{top:"100px"},changeoffset:{top:"0px"}}); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } </script> </head> <body style="text-align:center;"> <br/><br/><br/> 设置Webview窗口的回弹效果<br/><br/><br/> *暂仅支持顶部的回弹效果* </body> </html> ~~~ # [setBlockNetworkImage]() 设置Webview窗口是否阻塞加载页面中使用的网络图片 ~~~ void wobj.setBlockNetworkImage( block ); ~~~ ### 参数: - block: *( Boolean ) 必选 *是否阻塞加载网络图片 true表示不加载页面中使用的网络图片,false表示加载也页面中使用的网络图片。 ### 返回值: void : 无 ### 平台支持: - Android - 2.2+ (支持) - iOS - ALL (不支持) ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } function blockOpen(){ // 阻塞网络图片模式打开页面 var w=plus.webview.create("http://m.csdn.net/","csdn",{blockNetworkImage:true}); w.addEventListener("loaded",function(){ w.show("slide-in-right",300); // 加载网络图片 w.setBlockNetworkImage(false); },false); } </script> </head> <body> 显示窗口后再加载网络图片<br/> <button onclick="blockOpen()">打开页面</button> </body> </html> ~~~ # [setContentVisible]() 设置HTML内容是否可见 ~~~ void wobj.setContentVisible( visible ); ~~~ ### 说明: 设置HTML内容不可见后,将显示Webview窗口的背景色。 ### 参数: - visible: *( Boolean ) 必选 *设置页面是否可见,true表示可见,false表示不可见 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); ws.append(embed); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 设置HTML内容是否可见 function setContentVisible(v) { embed.setContentVisible(v); } </script> </head> <body> 设置HTML内容是否可见 <button onclick="setContentVisible(true)">可见</button> <button onclick="setContentVisible(false)">不可见</button> </body> </html> ~~~ # [setPullToRefresh]() 设置Webview窗口的下拉刷新效果 ~~~ void wobj.setPullToRefresh( style, refreshCB ); ~~~ ### 说明: 开启Webview窗口的下拉刷新功能,显示窗口内置的下拉刷新控件样式。 ### 参数: - style: *( WebviewRefreshStyle ) 必选 *Webview窗口下拉刷新样式参数 可设置窗口内置的下拉刷新控件在各种状态显示的文字内容。 - refreshCB: *( RefreshCallback ) 必选 *Webview窗口下拉刷新事件回调 用户操作窗口的下拉刷新触发窗口刷新事件时触发。 ### 返回值: void : 无 ### 平台支持: - Android - 2.2+ (支持) - iOS - ALL (支持) ### 示例: ~~~ <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="HandheldFriendly" content="true"/> <meta name="MobileOptimized" content="320"/> <title>Webview Example</title> <script type="text/javascript" charset="utf-8"> var ws=null; var list=null; // 扩展API加载完毕,现在可以正常调用扩展API function plusReady(){ ws=plus.webview.currentWebview(); ws.setPullToRefresh({support:true, height:"50px", range:"200px", contentdown:{ caption:"下拉可以刷新" }, contentover:{ caption:"释放立即刷新" }, contentrefresh:{ caption:"正在刷新..." } },onRefresh); plus.nativeUI.toast("下拉可以刷新"); } // 判断扩展API是否准备,否则监听"plusready"事件 if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // DOM构建完成获取列表元素 document.addEventListener("DOMContentLoaded",function(){ list=document.getElementById("list"); }) // 刷新页面 function onRefresh(){ setTimeout(function(){ if(list){ var item=document.createElement("li"); item.innerHTML="<span>New Item "+(new Date())+"</span>"; list.insertBefore(item,list.firstChild); } ws.endPullToRefresh(); },2000); } </script> <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/> <style type="text/css"> li { padding: 1em; border-bottom: 1px solid #eaeaea; } li:active { background: #f4f4f4; } </style> </head> <body> <ul id="list" style="list-style:none;margin:0;padding:0;"> <li><span>Initializ List Item 1</span></li> <li><span>Initializ List Item 2</span></li> <li><span>Initializ List Item 3</span></li> <li><span>Initializ List Item 4</span></li> <li><span>Initializ List Item 5</span></li> <li><span>Initializ List Item 6</span></li> <li><span>Initializ List Item 7</span></li> <li><span>Initializ List Item 8</span></li> <li><span>Initializ List Item 9</span></li> <li><span>Initializ List Item 10</span></li> </ul> </body> </html> ~~~ # [setStyle]() 设置Webview窗口的样式 ~~~ void wobj.setStyle( styles ); ~~~ ### 说明: 更新Webview窗口的样式,如窗口位置、大小、背景色等。 ### 参数: - styles: *( [WebviewStyle](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewStyle) ) 必选 *要设置的窗口样式 ### 返回值: void : 无 ### 示例: ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webview Example</title> <script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); ws.append(embed); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 设置Webview窗口的样式 function updateStyle() { embed.setStyle( {top:"92px"} ); } </script> </head> <body> 设置Webview窗口的样式 <button onclick="updateStyle()">setStyle</button> </body> </html> ~~~ # [setJsFile]() 设置预加载的JS文件 ~~~ void wobj.setJsFile( path ); ~~~ ### 说明: 预加载JS文件不需要在HTML页面中显式引用,在Webview窗口加载HTML页面时自动加载,在页面跳转时也会自动加载。 设置新的JS文件后将清空之前设置的值。 ### 参数: - file: *( String ) 必选 *预载入的JS文件地址,仅支持本地文件,格式为相对路径URL(plus.io.RelativeURL),如"_www/preload.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://weibo.com/dhnetwork","",{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> ~~~ # [show]() 显示Webview窗口 ~~~ void wobj.show( aniShow, duration, showedCB ); ~~~ ### 说明: 当调用plus.webview.create方法创建Webview窗口后,需要调用其show方法才能显示,并可设置窗口显示动画及动画时间。 Webview窗口被隐藏后也可调用此方法来重新显示。 ### 参数: - aniShow: *( [AnimationTypeShow](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.AnimationTypeShow) ) 可选 *Webview窗口显示动画类型 如果没有指定窗口动画类型,则使用默认值“none”,即无动画。 - duration: *( Number ) 可选 *Webview窗口显示动画持续时间 单位为ms,默认为600ms。 - showedCB: *( [ShowedCallback](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.ShowedCallback) ) 可选 *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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.show( "slide-in-right", 300 ); } </script> </head> <body> 显示Webview窗口 <button onclick="showWebview()">show</button> </body> </html> ~~~ # [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://weibo.com/dhnetwork","",{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> ~~~ # [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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.onclose=embedClose; ws.append(embed); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 页面关闭事件回调函数 function embedClose(e){ alert( "Closed!" ); } </script> </head> <body> Webview窗口关闭事件 <button onclick="embed.close()">onclose</button> </body> </html> ~~~ # [onerror]() Webview窗口错误事件 ### 说明: WebviewEvent 类型 当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://weibo.com/dhnetwork","",{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> ~~~ # [onloaded]() Webview窗口页面加载完成事件 ### 说明: WebviewEvent 类型 当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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.onloaded=embedLoaded; ws.append(embed); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 页面加载完成事件回调函数 function embedLoaded(e){ alert( "Loaded!" ); } </script> </head> <body> Webview窗口页面加载完成事件 <button onclick="embed.loadURL('http://m.csdn.net')">onloaded</button> </body> </html> ~~~ # [onloading]() Webview窗口页面开始加载事件 ### 说明: WebviewEvent 类型 当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://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"}); embed.onloading=embedLoading; ws.append(embed); } if(window.plus){ plusReady(); }else{ document.addEventListener("plusready",plusReady,false); } // 页面开始加载事件回调函数 function embedLoading(e){ alert( "Loading!" ); } </script> </head> <body> Webview窗口页面开始加载事件 <button onclick="embed.loadURL('http://m.csdn.net')">onloading</button> </body> </html> ~~~ # [WebviewBounceStyle]() Webview窗口回弹样式 ### 属性: - position: *(JSON 类型 )*Webview窗口支持回弹效果的方向 可通过此参数设置开启Webview哪个方向支持回弹效果。 支持以下属性: top:表示窗口顶部支持回弹效果; left:表示窗口左侧支持回弹效果; right:表示窗口右侧支持回弹效果; bottom:表示窗口底部支持回弹效果。 **目前仅支持top属性** 属性值:用于指定可拖拽的范围,可取百分比,如"10%";像素值,如"100px";自动计算值,如"auto";无回弹效果值,如"none"; - changeoffset: *(JSON 类型 )*Webview窗口回弹是停靠的位置 开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,拖拽过程中将触发"dragBounce"事件,松开后自动回弹到停靠位置。 支持以下属性: top:表示窗口顶部回弹时停靠的位置; left:表示窗口左侧回弹时停靠的位置; right:表示窗口右侧回弹时停靠的位置; bottom:表示窗口底部回弹时停靠的位置。 属性值:用于指定窗口回弹的位置,可取百分比,如"5%";像素值,如"100px";自动计算值,如"auto",默认为可拖拽的范围值的一半; # [WebviewDock]() 原生控件在窗口中停靠的方式 ### 常量: - "top": *(String 类型 )*控件停靠则页面顶部 - "bottom": *(String 类型 )*控件停靠在页面底部 - "right": *(String 类型 )*控件停靠在页面右侧 - "left": *(String 类型 )*控件停靠在页面左侧 # [WebviewEvent]() Webview窗口事件 ### 常量: - "close": *(String 类型 )*Webview窗口关闭事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口关闭时触发此事件,回调函数类型为EventCallback。 - "dragBounce": *(String 类型 )*Webview窗口回弹事件 通过WebviewObject对象的setBounce方法开启回弹效果后,当用户拖拽窗口时触发发此事件,回调函数类型为BounceEventCallback。 - "error": *(String 类型 )*Webview窗口加载错误事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载错误时触发此事件,回调函数类型为EventCallback。 - "hide": *(String 类型 )*Webview窗口隐藏事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口隐藏(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。 - "loading": *(String 类型 )*Webview窗口页面开始加载事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口开始加载新页面时触发此事件,回调函数类型为EventCallback。 - "loaded": *(String 类型 )*Webview窗口页面加载完成事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口页面加载完成时触发此事件,回调函数类型为EventCallback。 - "maskClick": *(String 类型 )*Webview窗口显示遮罩层时点击事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件,回调函数类型为EventCallback。 - "show": *(String 类型 )*Webview窗口显示事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口显示(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。 - "popGesture": *(String 类型 )*Webview窗口侧滑返回事件 通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口侧滑返回时触发此事件,回调函数类型为PopGestureCallback。 ### 平台支持 - Android - 2.2+ (不支持): 不支持侧滑返回功能,不会触发此事件。 - iOS - ALL (支持): Webview设置侧滑返回功能才能触发此事件。 # [WebviewRefreshStyle]() Webview窗口下拉刷新样式 ### 属性: - support: *(Boolean 类型 )*是否开启Webview窗口的下拉刷新功能 true表示开启窗口的下拉刷新功能; false表示关闭窗口的下拉刷新功能。 - height: *(String 类型 )*窗口的下拉刷新控件高度 支持百分比,如"10%";像素值,如"50px"。 - range: *(String 类型 )*窗口可下拉拖拽的范围 支持百分比,如"10%";像素值,如"50px"。 - contentdown: *(JSON 类型 )*在下拉可刷新状态时显示的内容 支持以下属性: caption:在下拉可刷新状态时下拉刷新控件上显示的标题内容。 - contentover: *(JSON 类型 )*在释放可刷新状态时显示的内容 支持以下属性: caption:在释放可刷新状态时下拉刷新控件上显示的标题内容。 - contentrefresh: *(JSON 类型 )*在正在刷新状态时显示的内容 支持以下属性: caption:在正在刷新状态时下拉刷新控件上显示的标题内容。 # [WebviewPosition]() 原生控件在窗口中显示的位置 ### 常量: - "static": *(String 类型 )*控件在页面中正常定位,如果页面存在滚动条则随窗口内容滚动 - "absolute": *(String 类型 )*控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动 - "dock": *(String 类型 )*控件在页面中停靠,停靠的位置通过dock属性进行定义 # [WebviewStyle]() JSON对象,原生窗口设置参数的对象 ### 属性: - background: *(String 类型 )*窗口的背景颜色 窗口空白区域的背景模式,设置background为颜色值(参考CSS Color Names,可取值/十六进制值/rgb值/rgba值),窗口为独占模式显示(占整个屏幕区域); 设置background为“transparent”,则表示窗口背景透明,为非独占模式。 ### 平台支持 - Android - 2.2+ (支持): Android平台4.0以上系统才支持,4.0以下系统窗口显示白色背景。 - iOS - 5.0+ (支持): iOS平台不支持“transparent”背景透明样式,默认背景使用白色背景。 - blockNetworkImage: *(Boolean 类型 )*是否阻塞网络图片的加载 布尔类型,true表示阻塞,false表示不阻塞,默认值为false。 阻塞后Webview窗口将不加载页面中使用的所有网络图片,可通过Webview窗口对象的setBlockNetWorkImage()方法动态修改此状态。 ### 平台支持 - Android - 2.2+ (支持) - iOS - 5.0+ (不支持): 忽略此属性,Webview窗口加载页面中所有图片。 - bottom: *(String 类型 )*窗口垂直向上的偏移量 支持百分比、像素值,当设置了top和height值时,此属性值忽略; - bounce: *(String 类型 )*窗口遇到边框是否有反弹效果 可取值:none表示没有反弹效果;vertical表示垂直方向有反弹效果;horizontal表示水平方向有反弹效果;all表示垂直和水平方向都有反弹效果。 ### 平台支持 - Android - (不支持) - iOS - (支持): 默认值为none,垂直和水平方向都没有反弹效果。 - dock: *([WebviewDock](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewDock) 类型 )*窗口的停靠方式 当Webview窗口添加到另外一个窗口中时,停靠方式才会生效,采用停靠方式添加会导致原Webview窗口自动调整其大小避免其内容呗子窗口盖住。 可取值:"top",控件停靠则页面顶部;"bottom",控件停靠在页面底部;"right",控件停靠在页面右侧;"left",控件停靠在页面左侧。 ### 平台支持 - Android - 2.2+ (支持) - iOS - 5.0+ (支持) - height: *(String 类型 )*窗口的高度 支持百分比、像素值,默认为100%。未设置height属性值时,可同时设置top和bottom属性值改变窗口的默认高度。 - left: *(String 类型 )*窗口水平向右的偏移量 支持百分比、像素值,默认值为0px。未设置left属性值时,可设置right属性值改变窗口的默认left位置。 - margin: *(String 类型 )*窗口的边距 用于定位窗口的位置,支持auto,auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。 - mask: *(String 类型 )*窗口的遮罩 用于设置Webview窗口的遮罩层样式,遮罩层会覆盖Webview中所有内容,包括子webview,并且截获webview的所有触屏事件,此时Webview窗口的点击操作会触发maskClick事件。 字符串类型,可取值: rgba格式字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)",表示黑色半透明; "none",表示不使用遮罩层; 默认值为"none",即无遮罩层。 - opacity: *(Number 类型 )*窗口的不透明度 0为全透明,1为不透明,默认值为1,即不透明。 ### 平台支持 - Android - 2.2+ (支持): 需Android4.0及以上平台才支持,Android4.0以前平台忽略此属性。 - iOS - 4.3+ (支持) - popGesture: *(String 类型 )*窗口的侧滑返回功能 可取值"none":无侧滑返回功能;"close":侧滑返回关闭Webview窗口;"hide":侧滑返回隐藏webview窗口。 仅iOS平台支持。 ### 平台支持 - Android - 2.2+ (不支持): 忽略此属性。 - iOS - 5.0+ (支持) - right: *(String 类型 )*窗口水平向左的偏移量 支持百分比、像素值,默认无值。当设置了left和width值时,此属性值忽略; - scalable: *(Boolean 类型 )*窗口是否可缩放 窗口设置为可缩放(scalable:true)时,用户可通过双指操作放大或缩小页面,此时html页面可通过meta节点设置“name="viewport" content="user-scalable=no"”来限制页面不可缩放。 窗口设置为不可缩放(scalable:false)时,用户不可通过双指操作放大或缩小页面,即使页面中的meta节点也无法开启可缩放功能。 默认值为false,即不可缩放。 - scrollIndicator: *(String 类型 )*窗口是否显示滚动条 用于控制窗口滚动条样式,可取值: "all":垂直和水平滚动条都显示; "vertical":仅显示垂直滚动条; "horizontal":仅显示水平滚动条; "none":垂直和水平滚动条都不显示。 默认值为"all",即垂直和水平滚动条都显示。 注意:显示滚动条的前提条件是窗口中的内容超过窗口显示的宽或高。 - scrollsToTop: *(Boolean 类型 )*点击设备的状态栏时是否滚动返回至顶部 true表示点击设备的状态栏可以滚动返回至顶部,false表示点击设备的状态栏不可以,默认值为true。 此功能仅iOS平台支持,在iPhone上有且只有一个Webview窗口的scrollsToTop属性值为true时才生效,所以在显示和关闭Webview窗口时需动态更新所有Webview的scrollsToTop值,已确保此功能生效。 ### 平台支持 - Android - ALL (不支持) - iOS - 5.0+ (支持) - top: *(String 类型 )*窗口垂直向下的偏移量 支持百分比、像素值,默认值为0px。未设置top属性值时,可设置bottom属性值改变窗口的默认top位置。 - transition: *([WebviewTransition](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewTransition) 类型 )*窗口定义窗口变换的动画效果,参考Transition - transform: *([WebviewTransform](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewTransform) 类型 )*窗口定义窗口变形效果,参考Transform - position: *([WebviewPosition](http://www.dcloud.io/docs/api/zh_cn/webview.shtml#plus.webview.WebviewPosition) 类型 )*Webview窗口的排版位置 当Webview窗口添加到另外一个窗口中时,排版位置才会生效,排版位置决定子窗口在父窗口中的定位方式。 可取值:"static",控件在页面中正常定位,如果页面存在滚动条则随窗口内容滚动;"absolute",控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动;"dock",控件在页面中停靠,停靠的位置由dock属性值决定。 ### 平台支持 - Android - (支持) - iOS - (支持) - width: *(String 类型 )*窗口的宽度 支持百分比、像素值,默认为100%。未设置width属性值时,可同时设置left和right属性值改变窗口的默认宽度。 - zindex: *(Number 类型 )*窗口的堆叠顺序值 拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面,拥有相同堆叠顺序的窗口后调用show方法则在前面。 # [WebviewTransform]() 一组用于定义页面或控件变形的属性 # [WebviewTransition]() 一组用于定义页面或控件转换效果的属性 ### 属性: - property: *(String 类型 )*产生变换效果的属性 默认值为"all",暂不支持其它值。 ### 平台支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - duration: *(String 类型 )*变换持续的时间 默认值为0,即无动画效果。 ### 平台支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) - timingfunction: *(String 类型 )*窗口变换效果 可取值"linear"、"ease-in"、"ease-out"、"ease-in-out",默认值为"linear"。 ### 平台支持 - Android - 2.2+ (支持) - iOS - 4.3+ (支持) # [BounceEventCallback]() Webview窗口回弹事件的回调函数 ~~~ void onEvent( Event event ){ // Event handled code. } ~~~ ### 参数: - event: *( Event ) 必选 *Webview窗口回弹事件触发时事件数据 Event对象包含以下属性: status:表示回弹位置状态,取值包括:"beforeChangeOffset"表示可继续拖拽,此时松开拖拽窗口会回弹到其初始位置; "afterChangeOffset"表示回弹可停靠,此时松开拖拽窗口会回弹到停靠位置; "dragEndAfterChangeOffset"表示已进松开拖拽,并且窗口回弹到停靠位置; target:保存触发回弹此事件的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:"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> ~~~ # [EventCallback]() Webview窗口事件的回调函数 ~~~ void onEvent( Event event ){ // Event handled code. } ~~~ ### 参数: - event: *( Event ) 必选 *Webview窗口事件触发时事件数据 Event对象包含以下属性: target:保存触发回弹此事件的Webview窗口对象。 ### 返回值: 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.csdn.net')">loaded</button> </body> </html> ~~~ # [PopGestureCallback]() Webview窗口侧滑事件的回调函数 ~~~ void onEvent( PopGestureEvent event ){ // Event handled code. } ~~~ ### 参数: - event: *( PopGestureEvent ) 必选 *Webview窗口事件触发时事件数据 PopGestureEvent对象包含以下属性: target:保存侧滑操作的Webview窗口对象。 type:保存侧滑事件类型,"start"表示开始侧滑返回,用户按下滑动时触发; “end”表示结束侧滑返回,用户松手时触发; “move"表示侧滑返回动作结束,用户移动侧滑时触发。 result:保存操作结果,仅在e.type为end时有效,boolean类型, true表示侧滑返回执行,false表示侧滑返回取消;否则为undefined。 progress:保存侧滑位置,Number类型,可带小数点,范围为0-100。 ### 返回值: 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.csdn.net/","",{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> ~~~ # [HistoryQueryCallback]() 历史记录记录查询的回调函数 ~~~ void onQuery( Event event ) { // Event handled code. } ~~~ ### 参数: - event: *( Event ) 必选 *查询Webview窗口历史记录操作事件数据 可通过event的canBack属性获取Webview窗口是否可后退,通过event的canForward属性获取Webview窗口是否可前进。 ### 返回值: void : 无 # [RefreshCallback]() Webview窗口刷新事件的回调函数 ~~~ void onRefresh(){ // Event handled code. } ~~~ ### 说明: 窗口开启下拉刷新功能后,用户操作窗口到刷新状态时触发。 ### 参数: 无 ### 返回值: 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> <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/> <style type="text/css"> li { padding: 1em; border-bottom: 1px solid #eaeaea; } li:active { background: #f4f4f4; } </style> </head> <body> <ul id="list" style="list-style:none;margin:0;padding:0;"> <li><span>Initializ List Item 1</span></li> <li><span>Initializ List Item 2</span></li> <li><span>Initializ List Item 3</span></li> <li><span>Initializ List Item 4</span></li> <li><span>Initializ List Item 5</span></li> <li><span>Initializ List Item 6</span></li> <li><span>Initializ List Item 7</span></li> <li><span>Initializ List Item 8</span></li> <li><span>Initializ List Item 9</span></li> <li><span>Initializ List Item 10</span></li> </ul> </body> </html> ~~~ # [ShowedCallback]() Webview窗口显示完成的回调函数 ~~~ void onShowed(){ // Event handled code. } ~~~ ### 说明: 调用Webview窗口的show方法显示窗口完成后触发回调函数,窗口无动画时也会触发此事件。 ### 参数: 无 ### 返回值: 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 showedTest() { // 打开新窗口 nw=plus.webview.create( "", "", {top:"46px",bottom:"0px"} ); // 显示窗口 nw.show("slide-in-right",300,function(){ console.log("窗口显示动画完成"); }); } </script> </head> <body> Webview窗口显示动画完成回调 <button onclick="showedTest()">Webview Showed</button> </body> </html> ~~~