<!-- # license: Licensed to the Apache Software Foundation (ASF) under one # or more contributor license agreements. See the NOTICE file # distributed with this work for additional information # regarding copyright ownership. The ASF licenses this file # to you under the Apache License, Version 2.0 (the # "License"); you may not use this file except in compliance # with the License. You may obtain a copy of the License at # # http://www.apache.org/licenses/LICENSE-2.0 # # Unless required by applicable law or agreed to in writing, # software distributed under the License is distributed on an # "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY # KIND, either express or implied. See the License for the # specific language governing permissions and limitations # under the License. --> # cordova-plugin-inappbrowser [![Build Status](https://travis-ci.org/apache/cordova-plugin-inappbrowser.svg)](https://travis-ci.org/apache/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` 來設置[演示文稿樣式](http://developer.apple.com/library/ios/documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalPresentationStyle)(預設為`fullscreen`). * **transitionstyle**: 將設置為 `fliphorizontal` , `crossdissolve` 或 `coververtical` 設置[過渡樣式](http://developer.apple.com/library/ios/#documentation/UIKit/Reference/UIViewController_Class/Reference/Reference.html#//apple_ref/occ/instp/UIViewController/modalTransitionStyle)(預設為`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`。規則 》 可能看起來像這些 ```css .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 文檔](https://msdn.microsoft.com/en-us/library/windows.ui.xaml.controls.webview.invokescriptasync.aspx)調用的腳本可以返回唯一字串值,否則該參數,傳遞給**回檔**將是`[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"}); });