cordova插件:inappbrowser

原文網址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/cordova-plugin-inappbrowser/

要想App裏邊的鏈接在指定的內部瀏覽器或者系統瀏覽器打開,需要使用cordova-plugin-inappbrowser插件;

當我們在APP中需要跳轉到一個特定的瀏覽器網頁時,用這個插件會很方便。

1.首先要在我們的項目中安裝這個插件:cordova plugin add cordova-plugin-inappbrowser,不過使用cordova安裝,不會將該包顯示在package.json文件中,也就是說,當我們再次reset此項目時,這個插件不會自動再次安裝了,所以我門需要使用這個命令安裝可避免上述情況發生:ionic plugin add cordova-plugin-inappbrowser。如果你已經使用cordova安裝過了,需要再使用cordova將插件卸載,然後再用ionic安裝;

2.使用方法:

cordova.InAppBrowser.open(URL,target,options)

open()中的URL參數爲瀏覽器跳轉的地址;

target的參數有三種:

_self:如果URL地址在WhiteList中,則用Cordova的WhiteList將其打開;

_blank:直接在App中將其地址打開;

_system:則是用手機默認瀏覽器將新頁面打開

options參數包含以下信息:

 location:設置爲yes或no來打開或關閉插件的locationbar;

 hidden:設置爲yes則加載出頁面但不顯示;設置爲no則正常加載頁面;

Android獨有屬性:

zoom:設置爲yes則顯示縮放瀏覽器頁面的按鈕,設置爲no則不顯示縮放按鈕;

hardwareback:設置爲yes則調用Android返回鍵回到前一界面,設置爲no則返回鍵爲退出瀏覽器頁面;

iOS獨有屬性:

closebuttoncaption:設置yes則顯示Done按鈕,設置爲no則隱藏Done按鈕,點擊Done按鈕關閉瀏覽器頁面;

toolbar:設置爲yes則顯示toolbar;no則隱藏toolbar(toolabar相當於Android的返回鍵功能);

keyboardDisplayRequiresUserAction:設置爲yes或者no來控制打開鍵盤時是否通過JavaScript調用focus()接收焦點,默認爲yes;

toolbarposition:設置爲top或者bottom,使工具欄顯示在窗口的頂部或底部;

3.簡單例子:

$scope.openUrl=function(){if (!cordova.InAppBrowser) {    return;
}// toolbar=yes 僅iOS有效,提供關閉、返回、前進三個按鈕// toolbarposition=top/bottom 僅iOS有效,決定toolbar的位置// closebuttoncaption=關閉 僅iOS有效cordova.InAppBrowser.open('http://www.baidu.com', '_blank', 'location=no,toolbar=yes,toolbarposition=top,closebuttoncaption=關閉');
}

openUrl是我寫的一個方法,在html頁面中在相應位置用ng-click去調用這個方法,此時就會觸發瀏覽器跳轉的事件,

根據open()中的設置,URL參數是百度的網址;

target參數爲"_blank",也就是在App中打開網址的頁面;

options參數爲iOS系統下會顯示toolbar,toolbar的位置在頂部,closebuttoncaption隱藏Done按鈕。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章