# [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>
~~~
- API參考
- Accelerometer
- Audio
- Camera
- Contacts
- Device
- Downloader
- Events
- Gallery
- Geolocation
- IO
- Key
- Messaging
- NativeUI
- Navigator
- Orientation
- Proximity
- SplashScreen
- Storage
- UI
- Uploader
- InterfaceOrientation
- Runtime
- WebView
- XMLHttpRequest
- Zip
- Plugins
- Barcode
- Maps
- Payment
- Push
- Share
- Speech
- Statistic
- Native.js
- Android
- iOS