1. 程式人生 > >ionic開發——瀏覽器開啟連結功能

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:在系統的

Web瀏覽器中開啟。

         2.3  options

                   可選,預設為: location=yes

            如:

               window.open('http://baidu.com', '_blank', 'location=yes');

            2.3.1 所有的平臺都支援以下值:

                location:設定為yesno,開啟InAppBrowser位址列中開啟或關閉。

                 hidden:設定為yes以建立瀏覽器和載入頁面,但沒有表現出來。該

loadstop事件觸發時載入完成。省略或設定為no(預設值)讓瀏覽器開啟並正常載入。

          如:     

               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:設定為YESNO(預設值為NO)。開啟/關閉的UIWebViewBounce屬性。

                  clearcache:設定為yes有瀏覽器的cookie快取中清除開啟新的視窗前。

                  clearsessioncache:設定為yes有會話cookie快取中清除開啟新的視窗前。

                  toolbar:設定為yesno開啟工具欄或關閉InAppBrowser(預設為yes

                  enableViewportScale:設定為yesno通過元標記防止結垢視(預設為no)。

                  mediaPlaybackRequiresUserAction:設定為yes,以防止HTML5的音訊或視訊自動播放(預設為no)。

                  allowInlineMediaPlayback:設定為yesno,允許線上HTML5的媒體播放,瀏覽器視窗,而不是特定於裝置的播放介面內顯示。該HTML的視訊元素還必須包括WebKitplaysinline屬性(預設為no

                  keyboardDisplayRequiresUserAction:設定為yesno當表單元素通過JavaScript  focus() 呼叫(預設為yes)接收焦點開啟鍵盤。

                  suppressesIncrementalRendering:設定為yesno等到所有新檢視的內容被渲染(預設為no)之前收到。

                  presentationstyle: 設定為pagesheet(它的寬度是固定的768點,在iPad豎屏情況下則全屏呈現), formsheet (它的是固定的540x620點,無論是橫屏還是豎屏情況下呈現尺寸都不會變化。)或者fullscreen(全屏狀態,是預設呈現樣式,iPhone只能全屏呈現。),設定演示風格(預設為fullscreen).

                  transitionstyle:設定為fliphorizontalcrossdissolvecoververtical設定過渡方式(預設為coververtical)。

                 toolbarposition:設定頂部或底部(預設為底部)。原因工具欄是在視窗的頂部或底部。

              2.3.4 僅適用於Windows

                fullscreen: 設定為yes就會建立一個沒有邊框的瀏覽器控制元件,請注意,如果指定 location=no的話,也就沒有呈現給使用者關閉選項卡視窗的控制。