ionic開發——瀏覽器開啟連結功能
在APP應用中,我們可能需要點選圖片開啟瀏覽器開啟連結的一些功能:
實現方法其實很簡單:
一、進入該專案目錄,安裝外掛。
ionic plugin add cordova-plugin-inappbrowser
外掛詳情:https://www.npmjs.com/package/cordova-plugin-inappbrowser
二、給廣告效果新增點選事件。
如:
$scope.open=function () { window.open('http://baidu.com', '_blank', 'location=yes'); }
三、參考資料:
1.資料地址https://www.npmjs.com/package/cordova-plugin-inappbrowser
2. window.open(url, target, options);
2.1 url:聲明瞭要在視窗中顯示的文件的 URL地址。
2.2 target:
_blank -- 在新視窗中開啟連結
_self -- 在當前窗體開啟連結,此為預設值
_system:在系統的
2.3 options:
可選,預設為: location=yes
如:
window.open('http://baidu.com', '_blank', 'location=yes');
2.3.1 所有的平臺都支援以下值:
location:設定為yes或no,開啟InAppBrowser位址列中開啟或關閉。
hidden:設定為yes以建立瀏覽器和載入頁面,但沒有表現出來。該
如:
window.open('http://baidu.com', '_blank', 'hidden=yes');
2.3.2 僅適用於Android:
clearcache:設定為yes有瀏覽器的cookie快取中清除開啟新的視窗前。
clearsessioncache:設定為yes有會話cookie快取中清除開啟新的視窗前。
zoom:設定為yes,以顯示Android瀏覽器的縮放控制,設定為不隱藏起來。預設值是yes。
hardwareback:設定為yes使用手機後退按鈕通過InAppBrowser歷史向後導航。如果沒有前一頁面,所述InAppBrowser將關閉。預設值是肯定的,所以如果你想後退按鈕直接關閉InAppBrowser則必須將其設定為no。
mediaPlaybackRequiresUserAction:設定為yes,以防止HTML5的音訊或視訊自動播放(預設為無)。
2.3.3 僅適用於iOS:
closebuttoncaption:設定為一個字串作為完成按鈕的標題來使用。請注意,您需要自己本地化此值。
disallowoverscroll:設定為YES或NO(預設值為NO)。開啟/關閉的UIWebViewBounce屬性。
clearcache:設定為yes有瀏覽器的cookie快取中清除開啟新的視窗前。
clearsessioncache:設定為yes有會話cookie快取中清除開啟新的視窗前。
toolbar:設定為yes或no開啟工具欄或關閉InAppBrowser(預設為yes)
enableViewportScale:設定為yes或no通過元標記防止結垢視(預設為no)。
mediaPlaybackRequiresUserAction:設定為yes,以防止HTML5的音訊或視訊自動播放(預設為no)。
allowInlineMediaPlayback:設定為yes或no,允許線上HTML5的媒體播放,瀏覽器視窗,而不是特定於裝置的播放介面內顯示。該HTML的視訊元素還必須包括WebKit的playsinline屬性(預設為no)
keyboardDisplayRequiresUserAction:設定為yes或no當表單元素通過JavaScript focus() 呼叫(預設為yes)接收焦點開啟鍵盤。
suppressesIncrementalRendering:設定為yes或no等到所有新檢視的內容被渲染(預設為no)之前收到。
presentationstyle: 設定為pagesheet(它的寬度是固定的768點,在iPad豎屏情況下則全屏呈現), formsheet (它的是固定的540x620點,無論是橫屏還是豎屏情況下呈現尺寸都不會變化。)或者fullscreen(全屏狀態,是預設呈現樣式,iPhone只能全屏呈現。),設定演示風格(預設為fullscreen).
transitionstyle:設定為fliphorizontal、crossdissolve或coververtical設定過渡方式(預設為coververtical)。
toolbarposition:設定頂部或底部(預設為底部)。原因工具欄是在視窗的頂部或底部。
2.3.4 僅適用於Windows:
fullscreen: 設定為yes就會建立一個沒有邊框的瀏覽器控制元件,請注意,如果指定 location=no的話,也就沒有呈現給使用者關閉選項卡視窗的控制。