goober-ionic/plugins/cordova-plugin-inappbrowser/doc/zh

cordova-plugin-inappbrowser

這個外掛程式提供了一個 web 瀏覽器視圖，顯示在調用 cordova.InAppBrowser.open().

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');

cordova.InAppBrowser.open() 函數被定義為一個臨時替代 window.open () 函數。 現有 window.open () 調用，可以通過替換 window.open 使用 InAppBrowser 視窗：

window.open = cordova.InAppBrowser.open;

InAppBrowser 視窗像一個標準的 web 瀏覽器中，並且無法訪問科爾多瓦 Api。 為此，建議 InAppBrowser 如果您需要載入協力廠商 （不可信） 的內容，而不是載入，進入主要的科爾多瓦 web 視圖。 InAppBrowser 是不受白名單中，也不在系統瀏覽器中打開的連結。

InAppBrowser 預設情況下它自己的 GUI 控制項為使用者提供 （後退、 前進、 完成）。

為向後相容性，此外掛程式還鉤 window.open。 然而，window.open 外掛程式安裝鉤子可以有副作用 （尤其是如果這個外掛程式是只列為另一個外掛程式的依賴項）。 在未來的主要發行版本中，將刪除 window.open 鉤。 一直至從該外掛程式鉤子後，應用程式可以手動還原預設行為：

delete window.open // Reverts the call back to it's prototype's default

雖然 window.open 在全球範圍內，InAppBrowser 不可用直到 deviceready 事件之後。

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log("window.open works well");
}

安裝

cordova plugin add cordova-plugin-inappbrowser

如果您希望所有頁面載入中您的應用程式要通過 InAppBrowser，你可以簡單地在初始化過程中鉤 window.open。舉個例子：

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
}

cordova.InAppBrowser.open

在新的 InAppBrowser 實例，當前的瀏覽器實例或系統瀏覽器中打開的 URL。

var ref = cordova.InAppBrowser.open(url, target, options);

• ref： 參考 InAppBrowser 視窗。() InAppBrowser

• url： 要載入*（字串）*的 URL。調用 encodeURI() 這個如果 URL 包含 Unicode 字元。

• target： 目標在其中載入的 URL，可選參數，預設值為 _self 。（字串）

  • _self： 打開在科爾多瓦 web 視圖如果 URL 是在白名單中，否則它在打開InAppBrowser.
  • _blank： 在打開InAppBrowser.
  • _system： 在該系統的 web 瀏覽器中打開。

• options： 選項為 InAppBrowser 。可選，拖欠到： location=yes 。（字串）

  options字串必須不包含任何空白的空間，和必須用逗號分隔每個功能的名稱/值對。 功能名稱區分大小寫。 所有平臺都支援下面的值：

  • location： 設置為 yes 或 no ，打開 InAppBrowser 的位置欄打開或關閉。

  Android 系統只有：

  • hidden： 將設置為 yes ，創建瀏覽器和載入頁面，但不是顯示它。 載入完成時，將觸發 loadstop 事件。 省略或設置為 no （預設值），有的瀏覽器打開，然後以正常方式載入。
  • clearcache： 將設置為 yes 有瀏覽器的 cookie 清除緩存之前打開新視窗
  • clearsessioncache： 將設置為 yes 有會話 cookie 緩存清除之前打開新視窗
  • zoom: 設置為yes，顯示 Android 瀏覽器的縮放控制項，設置為no，以隱藏它們。 預設值是.
  • hardwareback: 設置為yes要使用硬體後退按鈕通過InAppBrowser的歷史向後導航。 如果沒有前一頁， InAppBrowser將會關閉。 預設值是的yes所以你必須將其設置為no，如果你想要的後退按鈕，只需關閉 InAppBrowser。

  只有 iOS：

  • closebuttoncaption: 設置為一個字串，以用作做按鈕的標題。請注意您需要對此值進行當地語系化你自己。
  • disallowoverscroll： 將設置為 yes 或 no （預設值是 no ）。打開/關閉的 UIWebViewBounce 屬性。
  • hidden： 將設置為 yes ，創建瀏覽器和載入頁面，但不是顯示它。 載入完成時，將觸發 loadstop 事件。 省略或設置為 no （預設值），有的瀏覽器打開，然後以正常方式載入。
  • clearcache： 將設置為 yes 有瀏覽器的 cookie 清除緩存之前打開新視窗
  • clearsessioncache： 將設置為 yes 有會話 cookie 緩存清除之前打開新視窗
  • toolbar： 設置為 yes 或 no ，為 InAppBrowser （預設為打開或關閉工具列yes)
  • enableViewportScale： 將設置為 yes 或 no ，防止通過 meta 標記 （預設為縮放的視區no).
  • mediaPlaybackRequiresUserAction： 將設置為 yes 或 no ，防止 HTML5 音訊或視頻從 autoplaying （預設為no).
  • allowInlineMediaPlayback： 將設置為 yes 或 no ，讓線在 HTML5 播放媒體，在瀏覽器視窗中，而不是特定于設備播放介面內顯示。 HTML 的 video 元素還必須包括 webkit-playsinline 屬性 （預設為no)
  • keyboardDisplayRequiresUserAction： 將設置為 yes 或 no 時，要打開鍵盤表單元素接收焦點通過 JavaScript 的 focus() 調用 （預設為yes).
  • suppressesIncrementalRendering： 將設置為 yes 或 no 等待，直到所有新查看的內容正在呈現 （預設為前收到no).
  • presentationstyle： 將設置為 pagesheet ， formsheet 或 fullscreen 來設置演示文稿樣式(預設為fullscreen).
  • transitionstyle： 將設置為 fliphorizontal ， crossdissolve 或 coververtical 設置過渡樣式(預設為coververtical).
  • toolbarposition： 將設置為 top 或 bottom （預設值是 bottom ）。使工具列，則在頂部或底部的視窗。

  僅限 Windows：

  • hidden： 將設置為 yes ，創建瀏覽器和載入頁面，但不是顯示它。 載入完成時，將觸發 loadstop 事件。 省略或設置為 no （預設值），有的瀏覽器打開，然後以正常方式載入。
  • fullscreen: 設置為yes，以創建無邊框的瀏覽器控制項。 請注意，如果location=no同時指定，則將呈現給使用者到密切 IAB 視窗沒有控制。

支援的平臺

• 亞馬遜火 OS
• Android 系統
• 黑莓 10
• 火狐瀏覽器作業系統
• iOS
• Windows 8 和 8.1
• Windows Phone 7 和 8
• 瀏覽器

示例

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var ref2 = cordova.InAppBrowser.open(encodeURI('http://ja.m.wikipedia.org/wiki/ハングル'), '_blank', 'location=yes');

火狐瀏覽器作業系統的怪癖

外掛程式不會強制任何設計是需要添加一些 CSS 規則，如果打開與 target=_blank。規則 》 可能看起來像這些

.inAppBrowserWrap {
  background-color: rgba(0,0,0,0.75);
  color: rgba(235,235,235,1.0);
}
.inAppBrowserWrap menu {
  overflow: auto;
  list-style-type: none;
  padding-left: 0;
}
.inAppBrowserWrap menu li {
  font-size: 25px;
  height: 25px;
  float: left;
  margin: 0 10px;
  padding: 3px 10px;
  text-decoration: none;
  color: #ccc;
  display: block;
  background: rgba(30,30,30,0.50);
}
.inAppBrowserWrap menu li.disabled {
    color: #777;
}

Windows 的怪癖

類似于 Firefox OS IAB 視窗視覺行為可以重寫通過inAppBrowserWrap/inAppBrowserWrapFullscreen的 CSS 類

瀏覽器的怪癖

• 外掛程式是通過 iframe，執行

• 未實現導航歷史記錄 (在 LocationBar 的回顧與展望按鈕)。

InAppBrowser

對 科爾多瓦的調用返回的物件。InAppBrowser.open.

方法

• addEventListener
• removeEventListener
• close
• show
• executeScript
• insertCSS

addEventListener

為事件添加一個攔截器InAppBrowser.

ref.addEventListener(eventname, callback);

• ref： 參考 InAppBrowser 視窗*(InAppBrowser)*

• eventname： 事件偵聽*（字串）*

  • loadstart： 當觸發事件 InAppBrowser 開始載入一個 URL。
  • loadstop： 當觸發事件 InAppBrowser 完成載入一個 URL。
  • loaderror： 當觸發事件 InAppBrowser 載入 URL 時遇到錯誤。
  • exit： 當觸發事件 InAppBrowser 關閉視窗。

• callback： 執行時觸發該事件的函數。該函數通過 InAppBrowserEvent 物件作為參數。

InAppBrowserEvent 屬性

• type： eventname，或者 loadstart ， loadstop ， loaderror ，或 exit 。（字串）

• url: 已載入的 URL。（字串）

• code： 僅中的情況的錯誤代碼 loaderror 。（人數）

• message： 該錯誤訊息，只有在的情況下 loaderror 。（字串）

支援的平臺

• 亞馬遜火 OS
• Android 系統
• iOS
• Windows 8 和 8.1
• Windows Phone 7 和 8
• 瀏覽器

瀏覽器的怪癖

loadstart和loaderror的事件不會被觸發。

快速的示例

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });

removeEventListener

移除的事件攔截器InAppBrowser.

ref.removeEventListener(eventname, callback);

• ref： 參考 InAppBrowser 視窗。() InAppBrowser

• eventname： 要停止偵聽的事件。（字串）

  • loadstart： 當觸發事件 InAppBrowser 開始載入一個 URL。
  • loadstop： 當觸發事件 InAppBrowser 完成載入一個 URL。
  • loaderror： 當觸發事件 InAppBrowser 遇到錯誤載入一個 URL。
  • exit： 當觸發事件 InAppBrowser 關閉視窗。

• callback: 要在事件觸發時執行的函數。該函數通過 InAppBrowserEvent 物件。

支援的平臺

• 亞馬遜火 OS
• Android 系統
• iOS
• Windows 8 和 8.1
• Windows Phone 7 和 8
• 瀏覽器

快速的示例

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
var myCallback = function(event) { alert(event.url); }
ref.addEventListener('loadstart', myCallback);
ref.removeEventListener('loadstart', myCallback);

close

關閉 InAppBrowser 視窗。

ref.close();

• ref： 參考 InAppBrowser 視窗*(InAppBrowser)*

支援的平臺

• 亞馬遜火 OS
• Android 系統
• 火狐瀏覽器作業系統
• iOS
• Windows 8 和 8.1
• Windows Phone 7 和 8
• 瀏覽器

快速的示例

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.close();

show

顯示打開了隱藏的 InAppBrowser 視窗。調用這沒有任何影響，如果 InAppBrowser 是已經可見。

ref.show();

• ref： InAppBrowser 視窗 (參考InAppBrowser)

支援的平臺

• 亞馬遜火 OS
• Android 系統
• iOS
• Windows 8 和 8.1
• 瀏覽器

快速的示例

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'hidden=yes');
// some time later...
ref.show();

executeScript

注入到 JavaScript 代碼 InAppBrowser 視窗

ref.executeScript(details, callback);

• ref： 參考 InAppBrowser 視窗。() InAppBrowser

• injectDetails: 要運行的腳本的詳細資訊或指定 file 或 code 的關鍵。（物件）

  • 檔： 腳本的 URL 來注入。
  • 代碼： 要注入腳本的文本。

• 回檔： 執行後注入的 JavaScript 代碼的函數。

  • 如果插入的腳本的類型 code ，回檔執行使用單個參數，這是該腳本的傳回值，裹在 Array 。 對於多行腳本，這是最後一條語句或最後計算的運算式的傳回值。

支援的平臺

• 亞馬遜火 OS
• Android 系統
• iOS
• Windows 8 和 8.1
• 瀏覽器

快速的示例

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.executeScript({file: "myscript.js"});
});

瀏覽器的怪癖

• 只有code關鍵被支援。

Windows 的怪癖

由於MSDN 文檔調用的腳本可以返回唯一字串值，否則該參數，傳遞給回檔將是[null].

insertCSS

注入到 CSS InAppBrowser 視窗。

ref.insertCSS(details, callback);

• ref： 參考 InAppBrowser 視窗*(InAppBrowser)*

• injectDetails: 要運行的腳本的詳細資訊或指定 file 或 code 的關鍵。（物件）

  • file： 樣式表的 URL 來注入。
  • code： 文本樣式表的注入。

• callback： 在 CSS 注射後執行的函數。

支援的平臺

• 亞馬遜火 OS
• Android 系統
• iOS
• Windows

快速的示例

var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');
ref.addEventListener('loadstop', function() {
    ref.insertCSS({file: "mystyles.css"});
});