1. 程式人生 > >mui webview 介面操作、視窗層關係

mui webview 介面操作、視窗層關係

1、獲取當前視窗id:

 //WebviewObject plus.webview.currentWebview();
   var ws=plus.webview.currentWebview();//獲取當前頁面所屬的Webview視窗物件
   console.log( "視窗標識: "+ws.id );
   console.log( "當前Webview視窗:"+ws.getURL() );
   var ws = plus.webview.getWebviewById(id);
   plus.webview.close(ws);
   等效於:plus.webview.getWebviewById
(id).close(); var h=plus.webview.getWebviewById( plus.runtime.appid ); console.log( "應用首頁Webview視窗:"+h.getURL() ); 更多方法可參考H5 Api: http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview

3、獲取所有Webview視窗

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

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

4、關閉Webview視窗

   //void  plus.webview.close( id_wvobj, aniClose, duration, extras );
    var ws=plus.webview.currentWebview();
    plus.webview.close(ws);

5、建立新的Webview視窗

   //WebviewObject   plus.webview.create
( url, id, styles, extras );
var w = plus.webview.create('http://m.weibo.cn/u/3196963860'); w.show(); // 顯示視窗

引數extras: ( JSON ) 可選 建立Webview視窗的額外擴充套件引數
值為JSON型別,設定擴充套件引數後可以直接通過Webview的點(“.”)操作符獲取擴充套件引數屬性值,如: var w=plus.webview.create(‘url.html’,’id’,{},{preload:’preload webview’}); // 可直接通過以下方法獲取preload值 console.log(w.preload); // 輸出值為“preload webview”
6、獲取螢幕所有可視的Webview視窗

   說明:僅在螢幕區域顯示的Webview視窗,如果Webview視窗顯示了但被其它Webview視窗蓋住則認為不可視。
  // Array[WebviewObject] plus.webview.getDisplayWebview();
    // 獲取所有可視的Webview視窗
    var wvs=plus.webview.getDisplayWebview();
    for(var i=0;i<wvs.length;i++){
        console.log('Display webview '+i+': '+wvs[i].getURL());
    }

7、獲取應用首頁WebviewObject視窗物件

  //WebviewObject  plus.webview.getLaunchWebview();
    // 獲取應用首頁視窗物件
    var h=plus.webview.getLaunchWebview();
    console.log('應用首頁Webview視窗:'+h.getURL());

8、獲取應用第二個首頁WebviewObject視窗物件

  //WebviewObject plus.webview.getSecondWebview();
      var h=plus.webview.getSecondWebview();
    if(h){
        console.log('應用第二個首頁Webview視窗:'+h.getURL());
    }else{
        console.log('應用不存在第二個首頁Webview視窗');
    }

9、mui 雙首頁secondwebview配置的使用

   參考:http://www.bcty365.com/content-146-5587-1.html

     雙首頁模式

依照更新說明,在manifest.json檔案的plus節點下,新增secondwebview節點配置。

"plus": {
    "secondwebview": {
        "launch_path": "_www/home.html",
        "id": "home"
    }
}
這裡同樣支援secondWebview的styles等屬性。

"plus": {
    "secondwebview": {
        "launch_path": "_www/home.html",
        "id": "home",
        "top": "50px",
        "bottom": "0px"
    }
}
然後,在launchWebview中建立父子關係即可。當然,如果非必要情況下,是不用建立父子關係的。

var _self = plus.webview.getLaunchWebview();
var _second = plus.webview.getSecondWebview();
_self.append(_second);
在雙首頁模式下,父頁面和子頁面的內容是同時顯示的,不會給使用者造成載入延遲的感覺,大大增強了流應用及5+App的體驗。

10、獲取應用顯示棧頂的WebviewObject視窗物件

  //WebviewObject plus.webview.getTopWebview();
    // 獲取應用首頁視窗物件
    var h=plus.webview.getTopWebview();
    console.log('應用顯示棧頂的Webview視窗:'+h.getURL());

11、隱藏Webview視窗

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

12、建立並開啟Webview視窗

    //WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );
     var w = plus.webview.open('http://m.weibo.cn/u/3196963860');

13、顯示Webview視窗

    //void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
      var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
    plus.webview.show(w); // 顯示視窗

14、create頁面,顯示不存在父子視窗
15、父子視窗append
Webview視窗作為子視窗新增(Webview.append)到其它Webview視窗中時有效,這時其它Webview視窗為父視窗。
將另一個Webview視窗作為子視窗新增到當前Webview視窗中,新增後其所有權歸父Webview視窗,父視窗顯示時子視窗會自動顯示,父視窗隱藏時子視窗自動隱藏,當父視窗關閉時子視窗也自動關閉。
我們不妨在子webview關閉父webview試試,結果發現子webview也被關閉了,如果不對子webview進行close()方法操作,可知子webview的生命週期是由父webview決定的。我們可以通過對子webview進行show()、hide()操作,甚至可以使用remove移除子Webview視窗,從而實現動態子webview。這種場景最常用的是webview選項卡。
16、mui.fire()觸發自定義事件

mui.fire( target , event , data )

17、 介面重新載入

  location.reload();  

18、視窗層級關係

 append   父子關係
  subpages 父子關係
  openwindow 平行關係
  preloadpages 平行關係
  create  平行關係