PhoneGap InAppBrowser

转载 2013年12月03日 11:57:37

InAppBrowser一個 web 瀏覽器視圖,顯示時調用 window.open() ,或當打開連結形成的作為<a target="_blank">.

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

注:InAppBrowser 視窗類似于一個標準的 web 瀏覽器,並且無法訪問科爾多瓦的 Api。

說明

從調用返回的物件window.open.

方法

訪問功能

從 3.0 版,科爾多瓦作為外掛程式實現了設備級 Api。 使用 CLI 的 plugin 命令,描述在命令列介面,可以添加或刪除一個專案,為此功能:

    $ cordova plugin add org.apache.cordova.inappbrowser
    $ cordova plugin ls
    [ 'org.apache.cordova.inappbrowser' ]
    $ cordova plugin rm org.apache.cordova.inappbrowser

這些命令適用于所有有針對性的平臺,但修改如下所述的特定于平臺的配置設置:

  • (在 androidapp/res/xml/config.xml)

    <feature name="InAppBrowser">
        <param name="android-package" value="org.apache.cordova.InAppBrowser" />
    </feature>
    
  • (在 iOSconfig.xml)

    <feature name="InAppBrowser">
        <param name="ios-package" value="CDVInAppBrowser" />
    </feature>
    
  • Windows Phone 7,8 個 (在config.xml)

    <feature name="InAppBrowser" />
    

一些平臺可能支援此功能,而無需任何特殊的配置。請參見在概述部分中的平臺支援

addEventListener

事件添加一個攔截器InAppBrowser.

ref.addEventListener(eventname, callback);

支援的平臺

  • Android 系統
  • 黑莓手機
  • iOS
  • Windows Phone 7 和 8

快速的示例

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

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.addEventListener Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
         var ref = window.open('http://apache.org', '_blank', 'location=yes');
         ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
         ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
         ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
         ref.addEventListener('exit', function(event) { alert(event.type); });
    }

    </script>
  </head>
  <body>
  </body>
</html>

removeEventListener

移除的事件攔截器InAppBrowser.

ref.removeEventListener(eventname, callback);

支援的平臺

  • Android 系統
  • 黑莓手機
  • iOS
  • Windows Phone 7 和 8

快速的示例

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

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.removeEventListener Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;

    function iabLoadStart(event) {
        alert(event.type + ' - ' + event.url);
    }

    function iabLoadStop(event) {
        alert(event.type + ' - ' + event.url);
    }

    function iabLoadError(event) {
        alert(event.type + ' - ' + event.message);
    }

    function iabClose(event) {
         alert(event.type);
         iabRef.removeEventListener('loadstart', iabLoadStart);
         iabRef.removeEventListener('loadstop', iabLoadStop);
         iabRef.removeEventListener('loaderror', iabLoadError);
         iabRef.removeEventListener('exit', iabClose);
    }

    // device APIs are available
    //
    function onDeviceReady() {
         iabRef = window.open('http://apache.org', '_blank', 'location=yes');
         iabRef.addEventListener('loadstart', iabLoadStart);
         iabRef.addEventListener('loadstop', iabLoadStop);
         iabRef.removeEventListener('loaderror', iabLoadError);
         iabRef.addEventListener('exit', iabClose);
    }

    </script>
  </head>
  <body>
  </body>
</html>

關閉

關閉 InAppBrowser 視窗。

ref.close();

支援的平臺

  • Android 系統
  • 黑莓手機
  • iOS
  • Windows Phone 7 和 8

快速的示例

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

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.close Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
         var ref = window.open('http://apache.org', '_blank', 'location=yes');
         // close InAppBrowser after 5 seconds
         setTimeout(function() {
             ref.close();
         }, 5000);
    }

    </script>
  </head>
  <body>
  </body>
</html>

顯示

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

ref.show();

支援的平臺

  • Android 系統
  • 黑莓手機
  • iOS

快速的示例

var ref = window.open('http://apache.org', '_blank', 'hidden=yes');
ref.show();

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.show Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
         var ref = window.open('http://apache.org', '_blank', 'hidden=yes');
         ref.addEventListener('loadstop', function(event) {
             alert('background window loaded'); 
         });
         // close InAppBrowser after 5 seconds
         setTimeout(function() {
             ref.close();
         }, 5000);
    }

    </script>
  </head>
  <body>
  </body>
</html>

executeScript

注入到 JavaScript 代碼 InAppBrowser 視窗

ref.executeScript 的詳細資訊) 
  • ref: 參考 InAppBrowser 視窗。() InAppBrowser

  • injectDetails: 要運行的腳本的詳細資訊或指定 filecode 的關鍵。(物件)

    • : 腳本的 URL 來注入。
    • 代碼: 要注入腳本的文本。
  • : 執行後注入的 JavaScript 代碼的函數。

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

支援的平臺

  • Android 系統
  • 黑莓手機
  • iOS

快速的示例

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

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.executeScript Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;

    // Inject our custom JavaScript into the InAppBrowser window
    //
    function replaceHeaderImage() {
        iabRef.executeScript({
            code: "var img=document.querySelector('#header img'); img.src='http://cordova.apache.org/images/cordova_bot.png';"
        }, function() {
            alert("Image Element Successfully Hijacked");
        }
    }

    function iabClose(event) {
         iabRef.removeEventListener('loadstop', replaceHeaderImage);
         iabRef.removeEventListener('exit', iabClose);
    }

    // device APIs are available
    //
    function onDeviceReady() {
         iabRef = window.open('http://apache.org', '_blank', 'location=yes');
         iabRef.addEventListener('loadstop', replaceHeaderImage);
         iabRef.addEventListener('exit', iabClose);
    }

    </script>
  </head>
  <body>
  </body>
</html>

insertCSS

注入到 CSS InAppBrowser 視窗。

ref.insertCSS(details, callback);
  • ref: 參考 InAppBrowser 視窗(InAppBrowser)

  • injectDetails: 要運行的腳本的詳細資訊或指定 filecode 的關鍵。(物件)

    • : 樣式表的 URL 來注入。
    • 代碼: 文本樣式表的注入。
  • : 在 CSS 注射後執行的函數。

支援的平臺

  • Android 系統
  • 黑莓手機
  • iOS

快速的示例

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

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>InAppBrowser.insertCSS Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Global InAppBrowser reference
    var iabRef = null;

    // Inject our custom CSS into the InAppBrowser window
    //
    function changeBackgroundColor() {
        iabRef.insertCSS({
            code: "body { background: #ffff00"
        }, function() {
            alert("Styles Altered");
        }
    }

    function iabClose(event) {
         iabRef.removeEventListener('loadstop', changeBackgroundColor);
         iabRef.removeEventListener('exit', iabClose);
    }

    // device APIs are available
    //
    function onDeviceReady() {
         iabRef = window.open('http://apache.org', '_blank', 'location=yes');
         iabRef.addEventListener('loadstop', changeBackgroundColor);
         iabRef.addEventListener('exit', iabClose);
    }

    </script>
  </head>
  <body>
  </body>
</html>

InAppBrowserEvent

物件傳遞給回呼函數從 addEventListener 上調用 InAppBrowser 的物件。

屬性

  • 類型: eventname,或者 loadstartloadstoploaderror ,或 exit(字串)

  • url: 已載入的 URL。(字串)

  • 代碼: 僅中的情況的錯誤代碼 loaderror(人數)

  • 消息: 該錯誤訊息,只有在的情況下 loaderror(字串)

window.open

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

var ref = window.open(url, target, options);
  • ref: 參考 InAppBrowser 視窗。() InAppBrowser

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

  • 目標: 目標在其中載入的 URL,可選參數,預設值為 _self(字串)

    • _self: 打開在科爾多瓦 web 視圖如果 URL 是在白名單中,否則它在打開InAppBrowser.
    • _blank: 在打開InAppBrowser.
    • _system: 在該系統的 web 瀏覽器中打開。
  • 選項: 選項為 InAppBrowser 。可選,拖欠到: location=yes(字串)

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

    • 位置: 設置為 yesno ,打開 InAppBrowser 的位置欄打開或關閉

      Android 僅

    • closebuttoncaption -將設置為一個字串,它將會在"完成"按鈕的標題。

    • 隱藏-設置為是以創建瀏覽器和載入頁面,但不是顯示它。 Load 事件將觸發載入完成時。 省略或設置為否 (預設值),以有瀏覽器打開,然後以正常方式載入。
    • clearcache -設置為 'yes' 有瀏覽器的 cookie 緩存清除之前打開新視窗
    • clearsessioncache -設置為 'yes' 有會話 cookie 緩存清除之前打開新視窗

      iOS 只

    • closebuttoncaption -將設置為一個字串,它將會在"完成"按鈕的標題。注意你會有自己的當地語系化此值。

    • 隱藏-設置為是以創建瀏覽器和載入頁面,但不是顯示它。 Load 事件將觸發載入完成時。 省略或設置為否 (預設值),以有瀏覽器打開,然後以正常方式載入。
    • 工具列-設置為 '是' 或 '否',打開工具列或關閉為 InAppBrowser (預設值為是)
    • enableViewportScale: 將設置為 yesno ,防止通過 meta 標記 (預設為縮放的視區no).
    • mediaPlaybackRequiresUserAction: 將設置為 yes no ,防止 HTML5 音訊或視頻從 autoplaying (預設為no).
    • allowInlineMediaPlayback: 將設置為 yesno 允許內聯 HTML5 播放媒體,在瀏覽器視窗中,而不是特定于設備播放介面內顯示。 HTML 的 video 元素還必須包括 webkit-playsinline 屬性 (預設為no)
    • keyboardDisplayRequiresUserAction: 將設置為 yes no 時,要打開鍵盤表單元素接收焦點通過 JavaScript 的 focus() 調用 (預設為yes).
    • suppressesIncrementalRendering: 將設置為 yes no 等待,直到所有新查看的內容正在呈現 (預設為前收到no).
    • presentationstyle: 將設置為 pagesheetformsheetfullscreen 來設置演示文稿樣式(預設為fullscreen).
    • transitionstyle: 將設置為 fliphorizontalcrossdissolvecoververtical 設置過渡樣式(預設為coververtical).

支援的平臺

  • Android 系統
  • 黑莓手機
  • iOS
  • Windows Phone 7 和 8

快速的示例

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

完整的示例

<!DOCTYPE html>
<html>
  <head>
    <title>window.open Example</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // device APIs are available
    //
    function onDeviceReady() {
        // external url
        var ref = window.open(encodeURI('http://apache.org'), '_blank', 'location=yes');
        // relative document
        ref = window.open('next.html', '_self');
    }

    </script>
  </head>
  <body>
  </body>
</html>

相关文章推荐

cordova-plugin-inappbrowser插件使用整理

一、InAppBrowser相关资料 InAppBrowser可以使用新的窗口实例打开连接,提供了地址栏的显示隐藏,一些窗口操作。 不能设置地址栏内容、按钮、样式等,如果想更好的操作需要使用cordo...

关于cordova的InAppBrowser插件的几点问题

在做app的时候需要使用手机内部浏览器打开外部网页,并且要同时加载本地的js文件,发现cordova的InAppBrowser插件提供这个功能。官方有一段代码是这样的: var ref = windo...

phonegap入门--12 InAppBrowser

InAppBrowser这个对象是当我们调用window.open的时候,显示出来一个浏览器. 在我们做项目的过程中客户需要在应用中打开携程的网站,这时候就可以直接使用这个对象,在应用程序中打开一个...

ngCordova插件(1)之InAppBrowser插件的使用

本次我们讨论如何在Hybrid App中打开浏览器的页面 $cordovaInAppBrowser.open(URL, target, options) open()中的URL参数为浏...

[Cordova/Phonegap] 改进InAppBrowser插件(WebView),让其<input type="file">支持选择文件

原文链接: 默认安卓的WebView显示的网页,其中的文件选择控件是不能选择文件的,点击弹不出文件或图片选择。 其实Google给WebView提供了接口,只要实现这些接口,就可以选择文件了。...

ionic添加cordova插件-InAppBrowser

InAppBrowser 提供网络浏览器视图。它可以用来打开图片,访问的网页,并打开PDF文件。cordova plugin add cordova-plugin-inappbrowserMetho...

phonegap-android-master

  • 2014年11月19日 15:17
  • 150KB
  • 下载

phonegap在线更新插件(android)

  • 2017年08月19日 10:45
  • 260KB
  • 下载

phonegap安卓环境下使用BarcodeScanner插件扫描二维码教程(包含PG3.X版本)

由于需要通过
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:PhoneGap InAppBrowser
举报原因:
原因补充:

(最多只允许输入30个字)