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 平行關係