HTML5+規範：Webview的使用詳解

時間  2019-11-12
標籤 html5 html 規範 webview 使用 詳解 欄目 HTML5 简体版
原文   原文鏈接

1、知識點

  Webview模塊管理應用窗口界面，實現多窗口的邏輯控制管理操做。經過plus.webview可獲取應用界面管理對象。javascript

一、方法

1.一、all: 獲取全部Webview窗口

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

說明：獲取應用中已建立的全部Webview窗口，包括全部未顯示的Webview窗口。 返回WebviewObject對象在數組中按建立的前後順序排列，即數組中第一個WebviewObject對象用是加載應用的入口頁面。html

返回值：Array[ WebviewObject] : 應用中建立的全部Webview窗口對象數組。java

示例：web

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 獲取全部Webview窗口  
  10. var wvs=plus.webview.all();  
  11. for(var i=0;i<wvs.length;i++){  
  12. console.log("webview"+i+": "+wvs[i].getURL());  
  13. }  
  14. }  
  15. if(window.plus){  
  16. plusReady();  
  17. }else{  
  18. document.addEventListener("plusready",plusReady,false);  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. 獲取全部Webview窗口  
  24. </body>  
  25. </html>  

 

 

1.二、close: 關閉Webview窗口

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

說明：關閉已經打開的Webview窗口，需先獲取窗口對象或窗口id，並可指定關閉窗口的動畫及動畫持續時間。網絡

參數：app

id_wvobj: ( String | WebviewObject ) 必選 要關閉Webview窗口id或窗口對象。若操做窗口對象已經關閉，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早打開的窗口，若沒有查找到對應id的WebviewObject對象，則無任何效果。ide

aniClose: ( AnimationTypeClose ) 可選 關閉Webview窗口的動畫效果。若是沒有指定關閉窗口動畫，則使用默認值「auto」，即便用顯示時設置的窗口動畫相對應的關閉動畫。函數

duration: ( Number ) 可選 關閉Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用顯示窗口動畫時間。

extras: ( WebviewExtraOptions) 可選 關閉Webview窗口擴展參數。可用於指定Webview窗口動畫是否使用圖片加速。

返回值：void : 無

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 關閉自身窗口  
  16. function closeme(){  
  17. var ws=plus.webview.currentWebview();  
  18. plus.webview.close(ws);  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. 關閉Webview窗口<br/>  
  24. <button onclick="closeme()">close</button>  
  25. </body>  
  26. </html>  

 

 

1.三、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窗口。 若是傳入無效的字符串則使用url參數做爲WebviewObject窗口的id值。

styles: ( WebviewStyles) 可選 建立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 : Webview窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 建立並顯示新窗口  
  16. function create(){  
  17. var w = plus.webview.create( "http://weibo.com/dhnetwork" );  
  18. w.show(); // 顯示窗口  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. 建立新的Webview窗口<br/>  
  24. <button onclick="create()">Create</button>  
  25. </body>  
  26. </html>  



 

1.四、currentWebview: 獲取當前窗口的WebviewObject對象

      WebviewObject plus.webview.currentWebview();

說明：獲取當前頁面所屬的Webview窗口對象。

返回值：WebviewObject : Webview窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. var ws=plus.webview.currentWebview();  
  10. console.log( "當前Webview窗口："+ws.getURL() );  
  11. }  
  12. if(window.plus){  
  13. plusReady();  
  14. }else{  
  15. document.addEventListener("plusready",plusReady,false);  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20. 獲取自身Webview窗口  
  21. </body>  
  22. </html>  

 

 

1.五、getWebviewById: 查找指定標識的WebviewObject窗口

      WebviewObject plus.webview.getWebviewById( id );

說明：在已建立的窗口列表中查找指定標識的Webview窗口並返回。 若沒有查找到指定標識的窗口則返回null，若存在多個相同標識的Webview窗口，則返回第一個建立的Webview窗口。 若是要獲取應用入口頁面所屬的Webview窗口，其標識爲應用的%APPID%，可經過plus.runtime.appid獲取。

參數：id: ( String ) 必選 要查找的Webview窗口標識

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 查找應用首頁窗口對象  
  10. var h=plus.webview.getWebviewById( plus.runtime.appid );  
  11. console.log( "應用首頁Webview窗口："+h.getURL() );  
  12. }  
  13. if(window.plus){  
  14. plusReady();  
  15. }else{  
  16. document.addEventListener("plusready",plusReady,false);  
  17. }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. 查找指定標識的窗口  
  22. </body>  
  23. </html>  

 

 

1.六、getLaunchWebview: 獲取應用首頁WebviewObject窗口對象

       WebviewObject plus.webview.getLaunchWebview();

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 獲取應用首頁窗口對象  
  10. var h=plus.webview.getLaunchWebview();  
  11. console.log( "應用首頁Webview窗口："+h.getURL() );  
  12. }  
  13. if(window.plus){  
  14. plusReady();  
  15. }else{  
  16. document.addEventListener("plusready",plusReady,false);  
  17. }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. 獲取應用首頁WebviewObject窗口對象  
  22. </body>  
  23. </html>  

 

 

1.七、getTopWebview: 獲取應用顯示棧頂的WebviewObject窗口對象

    WebviewObject plus.webview.getTopWebview();

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 獲取應用首頁窗口對象  
  10. var h=plus.webview.getTopWebview();  
  11. console.log( "應用顯示棧頂的Webview窗口："+h.getURL() );  
  12. }  
  13. if(window.plus){  
  14. plusReady();  
  15. }else{  
  16. document.addEventListener("plusready",plusReady,false);  
  17. }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. 獲取應用顯示棧頂的WebviewObject窗口對象  
  22. </body>  
  23. </html>  



 

1.八、hide: 隱藏Webview窗口

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

說明：根據指定的WebviewObject對象或id隱藏Webview窗口，使得窗口不可見。

參數：

id_wvobj: ( String | WebviewObject ) 必選 要隱藏的Webview窗口id或窗口對象。使用窗口對象時，若窗口對象已經隱藏，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早打開的，若沒有查找到對應id的WebviewObject對象，則無任何效果。

aniHide: ( AnimationTypeClose) 可選 隱藏Webview窗口的動畫效果。若是沒有指定窗口動畫，則使用默認動畫效果「none」。

duration: ( Number ) 可選 隱藏Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用默認窗口動畫時間。

extras: ( WebviewExtraOptions) 可選 隱藏Webview窗口擴展參數。可用於指定Webview窗口動畫是否使用圖片加速。

返回值：void : 無

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 隱藏自身窗口  
  16. function hideeme(){  
  17. plus.webview.hide( plus.webview.currentWebview() );  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 隱藏Webview窗口<br/>  
  23. <button onclick="hideeme()">Hide</button>  
  24. </body>  
  25. </html>  



 

1.九、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窗口。 若是傳入無效的字符串則使用url參數做爲WebviewObject窗口的id值。

styles: ( WebviewStyles) 可選 建立Webview窗口的樣式（如窗口寬、高、位置等信息）

aniShow: ( AnimationTypeShow) 可選 顯示Webview窗口的動畫效果。若是沒有指定窗口動畫，則使用默認無動畫效果「none」。

duration: ( Number ) 可選 顯示Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用默認窗口動畫時間600ms。

showedCB: ( SuccessCallback ) 可選 Webview窗口顯示完成的回調函數。當指定Webview窗口顯示動畫執行完畢時觸發回調函數，窗口無動畫效果（如"none"動畫效果）時也會觸發此回調。

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 建立並顯示新窗口  
  16. function openWebview(){  
  17. var w = plus.webview.open( "http://weibo.com/dhnetwork" );  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 打開Webview窗口<br/>  
  23. <button onclick="openWebview()">Open</button>  
  24. </body>  
  25. </html>  



 

1.十、show: 顯示Webview窗口

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

說明：顯示已建立或隱藏的Webview窗口，需先獲取窗口對象或窗口id，並可指定顯示窗口的動畫及動畫持續時間。

參數：

id_wvobj: ( String | WebviewObject ) 必選 要顯示Webview窗口id或窗口對象。若操做Webview窗口對象顯示，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早建立的窗口，若沒有查找到對應id的WebviewObject對象，則無任何效果。

aniShow: ( AnimationTypeShow) 可選 顯示Webview窗口的動畫效果。若是沒有指定窗口動畫類型，則使用默認值「auto」，即自動選擇上一次顯示窗口的動畫效果，若是以前沒有顯示過，則使用「none」動畫效果。

duration: ( Number ) 可選 顯示Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用默認窗口動畫時間600ms。

showedCB: ( SuccessCallback ) 可選 Webview窗口顯示完成的回調函數。當指定Webview窗口顯示動畫執行完畢時觸發回調函數，窗口無動畫效果（如"none"動畫效果）時也會觸發此回調。

extras: ( WebviewExtraOptions) 可選 顯示Webview窗口擴展參數。可用於指定Webview窗口動畫是否使用圖片加速。

返回值：WebviewObject : Webview窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15.    
  16. // 建立並顯示新窗口  
  17. function create(){  
  18. var w = plus.webview.create( "http://weibo.com/dhnetwork" );  
  19. plus.webview.show( w ); // 顯示窗口  
  20. }  
  21. </script>  
  22. </head>  
  23. <body>  
  24. 顯示Webview窗口<br/>  
  25. <button onclick="create()">Create</button>  
  26. </body>  
  27. </html>  

 

 

 

1.十一、defaultHardwareAccelerated: 獲取Webview默認是否開啓硬件加速

        Boolean plus.webview.defaultHardwareAccelerated();

說明：因爲不一樣設備對硬件加速的支持狀況存在差別，開啓硬件加速能加速HTML頁面的渲染，但也會消耗更多的系統資源，從而致使在部分設備上可能出現閃屏、發虛、分塊渲染等問題， 所以5+ Runtime會根據設備實際支持狀況自動選擇是否開啓硬件加速。 關閉硬件加速則可能會致使Webview頁面沒法支持Video標籤播放視頻等問題，若是在特定狀況下須要調整修改默認開啓硬件加速的行爲，則可經過plus.webview.defaultHardwareAccelerated()方法獲取當前設備默認是否開啓硬件加速狀態，從而決定是否須要顯式開啓或關閉指定Webview的硬件加速功能（經過WebviewStyles的hardwareAccelerated屬性設置）。

返回值：Boolean : Webview窗口默認開啓硬件加速則返回true，不然返回false。

平臺支持：Android - 2.3+ (支持): 返回當前設備默認是否開啓硬件加速。iOS - 5.1+ (不支持): 返回固定值true。

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15.    
  16. // 建立新窗口並設置開啓硬件加速  
  17. function create(){  
  18. var styles={};  
  19. // 在Android5以上設備，若是默認沒有開啓硬件加速，則強制設置開啓  
  20. if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)>=5){  
  21. styles.hardwareAccelerated=true;  
  22. }  
  23. var w = plus.webview.create( "http://weibo.com/dhnetwork", "test", styles );  
  24. plus.webview.show( w ); // 顯示窗口  
  25. }  
  26. </script>  
  27. </head>  
  28. <body>  
  29. 開啓硬件加速顯示Webview窗口<br/>  
  30. <button onclick="create()">Create</button>  
  31. </body>  
  32. </html>  



 

二、對象

AnimationTypeShow: 一組用於定義頁面或控件顯示動畫效果

AnimationTypeClose: 一組用於定義頁面或控件關閉的動畫效果

WebviewObject: Webview窗口對象，用於操做加載HTML頁面的窗口

WebviewBounceStyle: Webview窗口回彈樣式

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

WebviewEvent: Webview窗口事件

WebviewRefreshStyle: Webview窗口下拉刷新樣式

WebviewPosition: 原生控件在窗口中顯示的位置

WebviewStyles: JSON對象，原生窗口設置參數的對象

WebviewExtraOptions: JSON對象，原生窗口擴展參數

WebviewTransform: 一組用於定義頁面或控件變形的屬性

WebviewTransition: 一組用於定義頁面或控件轉換效果的屬性

WebviewOverrideUrlOptions: 攔截Webview窗口URL請求的屬性

三、回調方法

BounceEventCallback: Webview窗口回彈事件的回調函數

EventCallback: Webview窗口事件的回調函數

PopGestureCallback: Webview窗口側滑事件的回調函數

HistoryQueryCallback: 歷史記錄記錄查詢的回調函數

OverrideUrlLoadingCallback: Webview窗口攔截URL連接跳轉的回調函數

TitleUpdateCallback: Webview窗口加載頁面標題更新的回調函數

SuccessCallback: Webview窗口操做成功回調函數

ErrorCallback: Webview窗口操做失敗回調函數

 

2、重點

一、 在Webview窗口中添加子窗口

 

[html]  view plain  copy
 
  1. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  2. plus.webview.currentWebview().append( embed );  
  3. 與下面使用show顯示Webview窗口效果同樣。  
  4. ws=plus.webview.currentWebview();  
  5. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  6. embed.show();  

 

二、appendJsFile和setJsFile

（1）、wobj.appendJsFile( file )：添加Webview窗口預加載js文件

    對於一些網絡HTML頁面，在沒法修改HTML頁面時可經過此方法自動加載本地js文件。 當Webview窗口跳轉到新頁面時也會自動加載指定的js執行，添加多個js文件將按照添加的前後順序執行。

 

[html]  view plain  copy
 
  1. var nw=plus.webview.create("http://weibo.com/dhnetwork");  
  2. nw.appendJsFile("_www/preload.js");  
  3. nw.show();  

 

 

（2）、void wobj.setJsFile( path )：設置預加載的JS文件

    預加載JS文件不須要在HTML頁面中顯式引用，在Webview窗口加載HTML頁面時自動加載，在頁面跳轉時也會自動加載。 設置新的JS文件後將清空以前設置的值。

 

[html]  view plain  copy
 
  1. ws=plus.webview.currentWebview();  
  2. embed=plus.webview.create("http://weibo.com/dhnetwork");  
  3. embed.setJsFile( "_www/js/preload.js" );  
  4. ws.append(embed);  



 

三、clear:、hide和close

（1）、clear: 清空原生Webview窗口加載的內容

           void wobj.clear();

 

說明：清除原生窗口的內容，用於重置原生窗口加載的內容，清除其加載的歷史記錄等內容。

 

[html]  view plain  copy
 
  1. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  2. plus.webview.currentWebview().append( embed );  
  3. embed.clear();  

 

 

（2）、hide: 隱藏Webview窗口

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

說明：根據指定的WebviewObject對象或id隱藏Webview窗口，使得窗口不可見。

     plus.webview.hide( plus.webview.currentWebview() );

（3）、hide: 隱藏Webview窗口

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

說明：隱藏Webview窗口可保存已加載HTML頁面的上下文數據，能下降應用使用的系統資源，經過show方法可將隱藏的Webview窗口顯示出來。

 

[html]  view plain  copy
 
  1. ws=plus.webview.currentWebview();  
  2. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  3. embed.show();  
  4. embed.hide();  

 

 

（4）、close: 關閉Webview窗口

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

說明：關閉已經打開的Webview窗口，需先獲取窗口對象或窗口id，並可指定關閉窗口的動畫及動畫持續時間。

 

[html]  view plain  copy
 
  1. var ws=plus.webview.currentWebview();  
  2. plus.webview.close(ws);  

 

 

（5）、close: 關閉Webview窗口

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

說明：關閉並銷燬Webview窗口，可設置關閉動畫和動畫持續時間。

 

[html]  view plain  copy
 
  1. ws=plus.webview.currentWebview();  
  2. ws.close();  

 

四、setPullToRefresh：設置Webview窗口的下拉刷新效果

       void wobj.setPullToRefresh( style, refreshCB );

 

說明：開啓Webview窗口的下拉刷新功能，顯示窗口內置的下拉刷新控件樣式。

參數：

style: ( WebviewRefreshStyle) 必選 Webview窗口下拉刷新樣式參數。可設置窗口內置的下拉刷新控件在各類狀態顯示的文字內容。

refreshCB: ( SuccessCallback ) 必選 Webview窗口下拉刷新事件回調。用戶操做窗口的下拉刷新觸發窗口刷新事件時觸發。

返回值：void : 無

平臺支持：Android - 2.2+ (支持)，iOS - ALL (支持)

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8"/>  
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
  6. <meta name="HandheldFriendly" content="true"/>  
  7. <meta name="MobileOptimized" content="320"/>  
  8. <title>Webview Example</title>  
  9. <script type="text/javascript" charset="utf-8">  
  10. var ws=null;var list=null;  
  11. // 擴展API加載完畢，如今能夠正常調用擴展API  
  12. function plusReady(){  
  13. ws=plus.webview.currentWebview();  
  14. ws.setPullToRefresh({support:true,  
  15. height:"50px",  
  16. range:"200px",  
  17. contentdown:{  
  18. caption:"下拉能夠刷新"  
  19. },  
  20. contentover:{  
  21. caption:"釋放當即刷新"  
  22. },  
  23. contentrefresh:{  
  24. caption:"正在刷新..."  
  25. }  
  26. },onRefresh);  
  27. plus.nativeUI.toast("下拉能夠刷新");  
  28. }  
  29. // 判斷擴展API是否準備，不然監聽"plusready"事件  
  30. if(window.plus){  
  31. plusReady();  
  32. }else{  
  33. document.addEventListener("plusready",plusReady,false);  
  34. }  
  35. // DOM構建完成獲取列表元素  
  36. document.addEventListener("DOMContentLoaded",function(){  
  37. list=document.getElementById("list");  
  38. })  
  39. // 刷新頁面  
  40. function onRefresh(){  
  41. setTimeout(function(){  
  42. if(list){  
  43. var item=document.createElement("li");  
  44. item.innerHTML="<span>New Item "+(new Date())+"</span>";  
  45. list.insertBefore(item,list.firstChild);  
  46. }  
  47. ws.endPullToRefresh();  
  48. },2000);  
  49. }  
  50. </script>  
  51. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>  
  52. <style type="text/css">  
  53. li {  
  54. padding: 1em;  
  55. border-bottom: 1px solid #eaeaea;  
  56. }  
  57. li:active {  
  58. background: #f4f4f4;  
  59. }  
  60. </style>  
  61. </head>  
  62. <body>  
  63. <ul id="list" style="list-style:none;margin:0;padding:0;">  
  64. <li><span>Initializ List Item 1</span></li>  
  65. <li><span>Initializ List Item 2</span></li>  
  66. <li><span>Initializ List Item 3</span></li>  
  67. <li><span>Initializ List Item 4</span></li>  
  68. <li><span>Initializ List Item 5</span></li>  
  69. <li><span>Initializ List Item 6</span></li>  
  70. <li><span>Initializ List Item 7</span></li>  
  71. <li><span>Initializ List Item 8</span></li>  
  72. <li><span>Initializ List Item 9</span></li>  
  73. <li><span>Initializ List Item 10</span></li>  
  74. </ul>  
  75. </body>  
  76. </html>  



 

五、setStyle：設置Webview窗口的樣式

        void wobj.setStyle( styles );

說明：更新Webview窗口的樣式，如窗口位置、大小、背景色等。

參數：styles: ( WebviewStyles ) 必選 要設置的窗口樣式

返回值：void : 無

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. var ws=null,embed=null;  
  8. // H5 plus事件處理  
  9. function plusReady(){  
  10. ws=plus.webview.currentWebview();  
  11. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  12. ws.append(embed);  
  13. }  
  14. if(window.plus){  
  15. plusReady();  
  16. }else{  
  17. document.addEventListener("plusready",plusReady,false);  
  18. }  
  19. // 設置Webview窗口的樣式  
  20. function updateStyle() {  
  21. embed.setStyle( {top:"92px"} );  
  22. }  
  23. </script>  
  24. </head>  
  25. <body>  
  26. 設置Webview窗口的樣式  
  27. <button onclick="updateStyle()">setStyle</button>  
  28. </body>  
  29. </html>  



 

六、setBounce：設置Webview窗口的回彈效果

        void wobj.setBounce( style );

說明：開啓窗口回彈效果後，當窗口中展示的內容滾動到頭（頂部或底部）時，再拖拽時窗口總體內容將跟隨移動，鬆開後自動回彈到停靠位置（可經過style設置）。 拖拽窗口內容時頁面顯示Webview窗口的背景色，默認爲透明，此時顯示Webview下面的內容，利用這個特色能夠實現自定下拉刷新特效。

參數：

style: ( WebviewBounceStyle) 必選 Webview窗口回彈樣式參數，可設置窗口的回彈效果支持的方向，自動回彈後停靠的位置等參數。

返回值：void : 無

平臺支持：Android - 2.2+ (支持)，iOS - ALL (不支持)

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. var ws=null;  
  8. // H5 plus事件處理  
  9. function plusReady(){  
  10. ws=plus.webview.currentWebview();  
  11. ws.setBounce({position:{top:"100px"},changeoffset:{top:"0px"}});  
  12. }  
  13. if(window.plus){  
  14. plusReady();  
  15. }else{  
  16. document.addEventListener("plusready",plusReady,false);  
  17. }  
  18. </script>  
  19. </head>  
  20. <body style="text-align:center;">  
  21. <br/><br/><br/>  
  22. 設置Webview窗口的回彈效果<br/><br/><br/>  
  23. *暫僅支持頂部的回彈效果*  
  24. </body>  
  25. </html>  



 

七、setBlockNetworkImage：設置Webview窗口是否阻塞加載頁面中使用的網絡圖片

      void wobj.setBlockNetworkImage( block );

 

參數：block: ( Boolean ) 必選 是否阻塞加載網絡圖片。true表示不加載頁面中使用的網絡圖片，false表示加載也頁面中使用的網絡圖片。

返回值：void : 無

平臺支持：Android - 2.2+ (支持)，iOS - ALL (不支持)

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. var ws=null;  
  8. // H5 plus事件處理  
  9. function plusReady(){  
  10. }  
  11. if(window.plus){  
  12. plusReady();  
  13. }else{  
  14. document.addEventListener("plusready",plusReady,false);  
  15. }  
  16. function blockOpen(){  
  17. // 阻塞網絡圖片模式打開頁面  
  18. var w=plus.webview.create("http://m.csdn.net/","csdn",{blockNetworkImage:true});  
  19. w.addEventListener("loaded",function(){  
  20. w.show("slide-in-right",300);  
  21. // 加載網絡圖片  
  22. w.setBlockNetworkImage(false);  
  23. },false);  
  24. }  
  25. </script>  
  26. </head>  
  27. <body>  
  28. 顯示窗口後再加載網絡圖片<br/>  
  29. <button onclick="blockOpen()">打開頁面</button>  
  30. </body>  
  31. </html>  



 

 

八、addEventListener：添加事件監聽器

        wobj.addEventListener( event, listener, capture );

說明：向Webview窗口添加事件監聽器，當指定的事件發生時，將觸發listener函數的執行。 可屢次調用此方法向Webview添加多個監聽器，當監聽的事件發生時，將按照添加的前後順序執行。 

參數：

event: ( WebviewEvent ) 必選 Webview窗口事件類型

listener: ( EventCallback ) 必選 監聽事件發生時執行的回調函數

capture: ( Boolean ) 可選 捕獲事件流順序，暫無效果

返回值：void : 無

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. var nw=null;  
  16. // 監聽Webview窗口事件  
  17. function eventTest() {  
  18. if(nw){return;}  
  19. var w=plus.nativeUI.showWaiting()  
  20. // 打開新窗口  
  21. nw=plus.webview.create( "http://weibo.com/dhnetwork" );  
  22. nw.addEventListener( "loaded", function(){  
  23. console.log( "New Window loaded!" );  
  24. nw.show(); // 顯示窗口  
  25. w.close();  
  26. w=null;  
  27. }, false );  
  28. }  
  29. </script>  
  30. </head>  
  31. <body>  
  32. 添加事件監聽器<br/>  
  33. <button onclick="eventTest()">Event Listener</button>  
  34. </body>  
  35. </html>  



 

九、WebviewEvent：Webview窗口事件

   （1）、"close": (String 類型 )Webview窗口關閉事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口關閉時觸發此事件，回調函數類型爲EventCallback。

   （2）、"dragBounce": (String 類型 )Webview窗口回彈事件。經過WebviewObject對象的setBounce方法開啓回彈效果設置頂部下拉回彈changeoffset屬性後，當用戶向下拖拽窗口時觸發發此事件，回調函數類型爲BounceEventCallback。

   （3）、"slideBounce": (String 類型 )Webview窗口回彈事件。經過WebviewObject對象的setBounce方法開啓回彈效果設置左右側側滑slideoffset屬性後，當用戶向左右側拖拽窗口側滑時觸發發此事件，回調函數類型爲BounceEventCallback。

   （4）、"error": (String 類型 )Webview窗口加載錯誤事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口加載錯誤時觸發此事件，回調函數類型爲EventCallback。

   （5）、"hide": (String 類型 )Webview窗口隱藏事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口隱藏（窗口動畫完成後）時觸發此事件，回調函數類型爲EventCallback。

   （6）、"loading": (String 類型 )Webview窗口頁面開始加載事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口開始加載新頁面時觸發此事件，回調函數類型爲EventCallback。

   （7）、"loaded": (String 類型 )Webview窗口頁面加載完成事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口頁面加載完成時觸發此事件，回調函數類型爲EventCallback。

   （8）、"maskClick": (String 類型 )Webview窗口顯示遮罩層時點擊事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口經過mask屬性設置顯示遮罩層而且點擊時觸發此事件，回調函數類型爲EventCallback。

   （9）、"show": (String 類型 )Webview窗口顯示事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口顯示（窗口動畫完成後）時觸發此事件，回調函數類型爲EventCallback。

   （10）、"popGesture": (String 類型 )Webview窗口側滑返回事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口側滑返回時觸發此事件，回調函數類型爲PopGestureCallback。

   （11）、"titleUpdate": (String 類型 )Webview加載頁面標題更新事件。經過WebviewObject對象的addEventListener方法添加事件監聽函數，當Webview窗口加載新頁面更新標題時觸發此事件，回調函數類型爲SuccessCallback。 注意：此事件會先於loaded事件觸發，一般在加載網絡頁面時經過此事件可更快獲取到頁面的標題。

十、事件

（1）、onclose: Webview窗口關閉事件

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. var ws=null,embed=null;  
  8. // H5 plus事件處理  
  9. function plusReady(){  
  10. ws=plus.webview.currentWebview();  
  11. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  12. embed.onclose=embedClose;  
  13. ws.append(embed);  
  14. }  
  15. if(window.plus){  
  16. plusReady();  
  17. }else{  
  18. document.addEventListener("plusready",plusReady,false);  
  19. }  
  20. // 頁面關閉事件回調函數  
  21. function embedClose(e){  
  22. alert( "Closed!" );  
  23. }  
  24. </script>  
  25. </head>  
  26. <body>  
  27. Webview窗口關閉事件  
  28. <button onclick="embed.close()">onclose</button>  
  29. </body>  
  30. </html>  



 

（2）、onerror: Webview窗口錯誤事件

（3）、onloaded: Webview窗口頁面加載完成事件

（4）、onloading: Webview窗口頁面開始加載事件

1、知識點

  Webview模塊管理應用窗口界面，實現多窗口的邏輯控制管理操做。經過plus.webview可獲取應用界面管理對象。

一、方法

1.一、all: 獲取全部Webview窗口

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

說明：獲取應用中已建立的全部Webview窗口，包括全部未顯示的Webview窗口。 返回WebviewObject對象在數組中按建立的前後順序排列，即數組中第一個WebviewObject對象用是加載應用的入口頁面。

返回值：Array[ WebviewObject] : 應用中建立的全部Webview窗口對象數組。

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 獲取全部Webview窗口  
  10. var wvs=plus.webview.all();  
  11. for(var i=0;i<wvs.length;i++){  
  12. console.log("webview"+i+": "+wvs[i].getURL());  
  13. }  
  14. }  
  15. if(window.plus){  
  16. plusReady();  
  17. }else{  
  18. document.addEventListener("plusready",plusReady,false);  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. 獲取全部Webview窗口  
  24. </body>  
  25. </html>  

 

 

1.二、close: 關閉Webview窗口

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

說明：關閉已經打開的Webview窗口，需先獲取窗口對象或窗口id，並可指定關閉窗口的動畫及動畫持續時間。

參數：

id_wvobj: ( String | WebviewObject ) 必選 要關閉Webview窗口id或窗口對象。若操做窗口對象已經關閉，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早打開的窗口，若沒有查找到對應id的WebviewObject對象，則無任何效果。

aniClose: ( AnimationTypeClose ) 可選 關閉Webview窗口的動畫效果。若是沒有指定關閉窗口動畫，則使用默認值「auto」，即便用顯示時設置的窗口動畫相對應的關閉動畫。

duration: ( Number ) 可選 關閉Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用顯示窗口動畫時間。

extras: ( WebviewExtraOptions) 可選 關閉Webview窗口擴展參數。可用於指定Webview窗口動畫是否使用圖片加速。

返回值：void : 無

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 關閉自身窗口  
  16. function closeme(){  
  17. var ws=plus.webview.currentWebview();  
  18. plus.webview.close(ws);  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. 關閉Webview窗口<br/>  
  24. <button onclick="closeme()">close</button>  
  25. </body>  
  26. </html>  

 

 

1.三、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窗口。 若是傳入無效的字符串則使用url參數做爲WebviewObject窗口的id值。

styles: ( WebviewStyles) 可選 建立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 : Webview窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 建立並顯示新窗口  
  16. function create(){  
  17. var w = plus.webview.create( "http://weibo.com/dhnetwork" );  
  18. w.show(); // 顯示窗口  
  19. }  
  20. </script>  
  21. </head>  
  22. <body>  
  23. 建立新的Webview窗口<br/>  
  24. <button onclick="create()">Create</button>  
  25. </body>  
  26. </html>  



 

1.四、currentWebview: 獲取當前窗口的WebviewObject對象

      WebviewObject plus.webview.currentWebview();

說明：獲取當前頁面所屬的Webview窗口對象。

返回值：WebviewObject : Webview窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. var ws=plus.webview.currentWebview();  
  10. console.log( "當前Webview窗口："+ws.getURL() );  
  11. }  
  12. if(window.plus){  
  13. plusReady();  
  14. }else{  
  15. document.addEventListener("plusready",plusReady,false);  
  16. }  
  17. </script>  
  18. </head>  
  19. <body>  
  20. 獲取自身Webview窗口  
  21. </body>  
  22. </html>  

 

 

1.五、getWebviewById: 查找指定標識的WebviewObject窗口

      WebviewObject plus.webview.getWebviewById( id );

說明：在已建立的窗口列表中查找指定標識的Webview窗口並返回。 若沒有查找到指定標識的窗口則返回null，若存在多個相同標識的Webview窗口，則返回第一個建立的Webview窗口。 若是要獲取應用入口頁面所屬的Webview窗口，其標識爲應用的%APPID%，可經過plus.runtime.appid獲取。

參數：id: ( String ) 必選 要查找的Webview窗口標識

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 查找應用首頁窗口對象  
  10. var h=plus.webview.getWebviewById( plus.runtime.appid );  
  11. console.log( "應用首頁Webview窗口："+h.getURL() );  
  12. }  
  13. if(window.plus){  
  14. plusReady();  
  15. }else{  
  16. document.addEventListener("plusready",plusReady,false);  
  17. }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. 查找指定標識的窗口  
  22. </body>  
  23. </html>  

 

 

1.六、getLaunchWebview: 獲取應用首頁WebviewObject窗口對象

       WebviewObject plus.webview.getLaunchWebview();

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 獲取應用首頁窗口對象  
  10. var h=plus.webview.getLaunchWebview();  
  11. console.log( "應用首頁Webview窗口："+h.getURL() );  
  12. }  
  13. if(window.plus){  
  14. plusReady();  
  15. }else{  
  16. document.addEventListener("plusready",plusReady,false);  
  17. }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. 獲取應用首頁WebviewObject窗口對象  
  22. </body>  
  23. </html>  

 

 

1.七、getTopWebview: 獲取應用顯示棧頂的WebviewObject窗口對象

    WebviewObject plus.webview.getTopWebview();

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. // 獲取應用首頁窗口對象  
  10. var h=plus.webview.getTopWebview();  
  11. console.log( "應用顯示棧頂的Webview窗口："+h.getURL() );  
  12. }  
  13. if(window.plus){  
  14. plusReady();  
  15. }else{  
  16. document.addEventListener("plusready",plusReady,false);  
  17. }  
  18. </script>  
  19. </head>  
  20. <body>  
  21. 獲取應用顯示棧頂的WebviewObject窗口對象  
  22. </body>  
  23. </html>  



 

1.八、hide: 隱藏Webview窗口

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

說明：根據指定的WebviewObject對象或id隱藏Webview窗口，使得窗口不可見。

參數：

id_wvobj: ( String | WebviewObject ) 必選 要隱藏的Webview窗口id或窗口對象。使用窗口對象時，若窗口對象已經隱藏，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早打開的，若沒有查找到對應id的WebviewObject對象，則無任何效果。

aniHide: ( AnimationTypeClose) 可選 隱藏Webview窗口的動畫效果。若是沒有指定窗口動畫，則使用默認動畫效果「none」。

duration: ( Number ) 可選 隱藏Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用默認窗口動畫時間。

extras: ( WebviewExtraOptions) 可選 隱藏Webview窗口擴展參數。可用於指定Webview窗口動畫是否使用圖片加速。

返回值：void : 無

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 隱藏自身窗口  
  16. function hideeme(){  
  17. plus.webview.hide( plus.webview.currentWebview() );  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 隱藏Webview窗口<br/>  
  23. <button onclick="hideeme()">Hide</button>  
  24. </body>  
  25. </html>  



 

1.九、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窗口。 若是傳入無效的字符串則使用url參數做爲WebviewObject窗口的id值。

styles: ( WebviewStyles) 可選 建立Webview窗口的樣式（如窗口寬、高、位置等信息）

aniShow: ( AnimationTypeShow) 可選 顯示Webview窗口的動畫效果。若是沒有指定窗口動畫，則使用默認無動畫效果「none」。

duration: ( Number ) 可選 顯示Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用默認窗口動畫時間600ms。

showedCB: ( SuccessCallback ) 可選 Webview窗口顯示完成的回調函數。當指定Webview窗口顯示動畫執行完畢時觸發回調函數，窗口無動畫效果（如"none"動畫效果）時也會觸發此回調。

返回值：WebviewObject : WebviewObject窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15. // 建立並顯示新窗口  
  16. function openWebview(){  
  17. var w = plus.webview.open( "http://weibo.com/dhnetwork" );  
  18. }  
  19. </script>  
  20. </head>  
  21. <body>  
  22. 打開Webview窗口<br/>  
  23. <button onclick="openWebview()">Open</button>  
  24. </body>  
  25. </html>  



 

1.十、show: 顯示Webview窗口

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

說明：顯示已建立或隱藏的Webview窗口，需先獲取窗口對象或窗口id，並可指定顯示窗口的動畫及動畫持續時間。

參數：

id_wvobj: ( String | WebviewObject ) 必選 要顯示Webview窗口id或窗口對象。若操做Webview窗口對象顯示，則無任何效果。 使用窗口id時，則查找對應id的窗口，若是有多個相同id的窗口則操做最早建立的窗口，若沒有查找到對應id的WebviewObject對象，則無任何效果。

aniShow: ( AnimationTypeShow) 可選 顯示Webview窗口的動畫效果。若是沒有指定窗口動畫類型，則使用默認值「auto」，即自動選擇上一次顯示窗口的動畫效果，若是以前沒有顯示過，則使用「none」動畫效果。

duration: ( Number ) 可選 顯示Webview窗口動畫的持續時間。單位爲ms，若是沒有設置則使用默認窗口動畫時間600ms。

showedCB: ( SuccessCallback ) 可選 Webview窗口顯示完成的回調函數。當指定Webview窗口顯示動畫執行完畢時觸發回調函數，窗口無動畫效果（如"none"動畫效果）時也會觸發此回調。

extras: ( WebviewExtraOptions) 可選 顯示Webview窗口擴展參數。可用於指定Webview窗口動畫是否使用圖片加速。

返回值：WebviewObject : Webview窗口對象

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15.    
  16. // 建立並顯示新窗口  
  17. function create(){  
  18. var w = plus.webview.create( "http://weibo.com/dhnetwork" );  
  19. plus.webview.show( w ); // 顯示窗口  
  20. }  
  21. </script>  
  22. </head>  
  23. <body>  
  24. 顯示Webview窗口<br/>  
  25. <button onclick="create()">Create</button>  
  26. </body>  
  27. </html>  

 

 

 

1.十一、defaultHardwareAccelerated: 獲取Webview默認是否開啓硬件加速

        Boolean plus.webview.defaultHardwareAccelerated();

說明：因爲不一樣設備對硬件加速的支持狀況存在差別，開啓硬件加速能加速HTML頁面的渲染，但也會消耗更多的系統資源，從而致使在部分設備上可能出現閃屏、發虛、分塊渲染等問題， 所以5+ Runtime會根據設備實際支持狀況自動選擇是否開啓硬件加速。 關閉硬件加速則可能會致使Webview頁面沒法支持Video標籤播放視頻等問題，若是在特定狀況下須要調整修改默認開啓硬件加速的行爲，則可經過plus.webview.defaultHardwareAccelerated()方法獲取當前設備默認是否開啓硬件加速狀態，從而決定是否須要顯式開啓或關閉指定Webview的硬件加速功能（經過WebviewStyles的hardwareAccelerated屬性設置）。

返回值：Boolean : Webview窗口默認開啓硬件加速則返回true，不然返回false。

平臺支持：Android - 2.3+ (支持): 返回當前設備默認是否開啓硬件加速。iOS - 5.1+ (不支持): 返回固定值true。

示例：

 

[html]  view plain  copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>Webview Example</title>  
  6. <script type="text/javascript">  
  7. // H5 plus事件處理  
  8. function plusReady(){  
  9. }  
  10. if(window.plus){  
  11. plusReady();  
  12. }else{  
  13. document.addEventListener("plusready",plusReady,false);  
  14. }  
  15.    
  16. // 建立新窗口並設置開啓硬件加速  
  17. function create(){  
  18. var styles={};  
  19. // 在Android5以上設備，若是默認沒有開啓硬件加速，則強制設置開啓  
  20. if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)>=5){  
  21. styles.hardwareAccelerated=true;  
  22. }  
  23. var w = plus.webview.create( "http://weibo.com/dhnetwork", "test", styles );  
  24. plus.webview.show( w ); // 顯示窗口  
  25. }  
  26. </script>  
  27. </head>  
  28. <body>  
  29. 開啓硬件加速顯示Webview窗口<br/>  
  30. <button onclick="create()">Create</button>  
  31. </body>  
  32. </html>  



 

二、對象

AnimationTypeShow: 一組用於定義頁面或控件顯示動畫效果

AnimationTypeClose: 一組用於定義頁面或控件關閉的動畫效果

WebviewObject: Webview窗口對象，用於操做加載HTML頁面的窗口

WebviewBounceStyle: Webview窗口回彈樣式

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

WebviewEvent: Webview窗口事件

WebviewRefreshStyle: Webview窗口下拉刷新樣式

WebviewPosition: 原生控件在窗口中顯示的位置

WebviewStyles: JSON對象，原生窗口設置參數的對象

WebviewExtraOptions: JSON對象，原生窗口擴展參數

WebviewTransform: 一組用於定義頁面或控件變形的屬性

WebviewTransition: 一組用於定義頁面或控件轉換效果的屬性

WebviewOverrideUrlOptions: 攔截Webview窗口URL請求的屬性

三、回調方法

BounceEventCallback: Webview窗口回彈事件的回調函數

EventCallback: Webview窗口事件的回調函數

PopGestureCallback: Webview窗口側滑事件的回調函數

HistoryQueryCallback: 歷史記錄記錄查詢的回調函數

OverrideUrlLoadingCallback: Webview窗口攔截URL連接跳轉的回調函數

TitleUpdateCallback: Webview窗口加載頁面標題更新的回調函數

SuccessCallback: Webview窗口操做成功回調函數

ErrorCallback: Webview窗口操做失敗回調函數

 

2、重點

一、 在Webview窗口中添加子窗口

 

[html]  view plain  copy
 
  1. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  2. plus.webview.currentWebview().append( embed );  
  3. 與下面使用show顯示Webview窗口效果同樣。  
  4. ws=plus.webview.currentWebview();  
  5. embed=plus.webview.create("http://weibo.com/dhnetwork","",{top:"46px",bottom:"0px"});  
  6. embed.show();  

 

二、appendJsFile和setJsFile

（1）、wobj.appendJsFile( file )：添加Webview窗口預加載js文件

    對於一些網絡HTML頁面，在沒法修改HTML頁面時可經過此方法自動加載本地js文件。 當Webview窗口跳轉到新頁面時也會自動加載指定的js執行，添加多個js文件將按照添加的前後順序執行。

 

[html]  view plain  copy
 
  1. var nw=plus.webview.create("http://weibo.com/dhnetwork");  
  2. nw.appendJsFile("_www/preload.js");  
  3. nw.show();  

 

 

（2）、void wobj.setJsFile( path )：設置預加載的JS文件

預加載JS文件不須要在HTML頁面中顯式引用，在Webview窗口加載HTML頁面時自動加載，在頁面跳轉時也會自動加載。 設置新的JS文件後將清空以前設置的值。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程