PhoneGap InAppBrowser

最新推荐文章于 2024-08-06 20:25:06 发布
最新推荐文章于 2024-08-06 20:25:06 发布
阅读量3.1k 收藏
点赞数
分类专栏： PhoneGap 文章标签： PhoneGap

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: 要運行的腳本的詳細資訊或指定 file 或 code 的關鍵。（物件）

    • 檔： 腳本的 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: 要運行的腳本的詳細資訊或指定 file 或 code 的關鍵。（物件）

    • 檔： 樣式表的 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，或者 loadstart ， loadstop ， loaderror ，或 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字串必須不包含任何空白的空間，和必須用逗號分隔每個功能的名稱/值對。 功能名稱區分大小寫。 所有平臺都支援下面的值：

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

      Android 僅

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

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

    • clearsessioncache -設置為 'yes' 有會話 cookie 緩存清除之前打開新視窗

      iOS 只

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

    • 隱藏-設置為是以創建瀏覽器和載入頁面，但不是顯示它。 Load 事件將觸發載入完成時。 省略或設置為否 （預設值），以有瀏覽器打開，然後以正常方式載入。
    • 工具列-設置為 '是' 或 '否'，打開工具列或關閉為 InAppBrowser （預設值為是）
    • 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).

支援的平臺

  • 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>
MarkHD
关注
专栏目录
cordova-plugin-inappbrowser插件使用整理
天马3798
02-16 2万+
一、InAppBrowser相关资料 InAppBrowser可以使用新的窗口实例打开连接，提供了地址栏的显示隐藏，一些窗口操作。 不能设置地址栏内容、按钮、样式等，如果想更好的操作需要使用cordova-plugin-themeablebrowser插件 官网api：http://cordova.apache.org/docs/en/latest/reference/cordova-plu
关于cordova的InAppBrowser插件的几点问题
冰咖啡的专栏
03-08 1万+
在做app的时候需要使用手机内部浏览器打开外部网页，并且要同时加载本地的js文件，发现cordova的InAppBrowser插件提供这个功能。官方有一段代码是这样的： var ref = window.open('http://apache.org', '_blank', 'location=yes'); ref.addEventListener('loadstop', function()...
Apache Cordova插件：在应用内浏览器(InAppBrowser)指南
最新发布
gitblog_00561的博客
08-06 841
Apache Cordova插件：在应用内浏览器(InAppBrowser)指南 cordova-plugin-inappbrowserCordovaInAppBrowser插件是一个浏览器窗口，可在Cordova应用程序中打开网页。它可以作为独立的浏览器运行，也可以嵌入到原生UI中。项目地址:https://gitcode.com/gh_mirrors/co/cordova-plugin-in...
phonegap入门--12 InAppBrowser
热门推荐
孟祥月的专栏
05-07 1万+
InAppBrowser这个对象是当我们调用window.open的时候,显示出来一个浏览器. 在我们做项目的过程中客户需要在应用中打开携程的网站,这时候就可以直接使用这个对象,在应用程序中打开一个浏览器.window.open方法会返回此对象. var ref = window.open('http://apache.org', '_blank', 'location=yes');此对象有三
[Cordova/Phonegap] 改进InAppBrowser插件(WebView)，让其<input type="file">支持选择文件
小桥流水丿小溪
10-14 4278
原文链接： 默认安卓的WebView显示的网页，其中的文件选择控件是不能选择文件的，点击弹不出文件或图片选择。 其实Google给WebView提供了接口，只要实现这些接口，就可以选择文件了。 搜索了很多，最终发现StackOverflow上的这个答案，是我找到最能满足需求的一个解决方案了。 http://stackoverflow.com/questions/59
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
WJLcomeon的博客
10-13 2763
“Input”表示值，但在此处用作类型。是否指“类型 Input”?ts(2749)
ionic添加cordova插件-InAppBrowser
gzgchzc的博客
12-26 3782
gzgchzc博客最新更新地址：http://blog.gzvtc.cc/ InAppBrowser 提供网络浏览器视图。它可以用来打开图片，访问的网页，并打开PDF文件。 cordova plugin add cordova-plugin-inappbrowser Methods $cordovaInAppBrowserProvider.setDefaultOptions(opti
cordova插件(一)-inappbrowser
coderchenhao的博客
08-10 3083
插件介绍 博主这里讲的是cordova-plugin-inappbrowser这个插件，它可以帮我们实现这样的一个功能，就是在我们的混合app里面，使用app内置浏览器打开一个页面，而不用内置浏览器去打开。 使用插件 下面我们开始讲解inappbrowser插件的使用。 安装插件 在我们的项目根目录执行下面的命令。 cordova plugin add cordova-plugin-inappbrowser 查看命令执行结果： js修改 我们这里实现的是这样的一个功能，当cordova容器加载完毕的时候
inappbrowser-back-button-fix:标准 PhoneGap inAppBrowser 插件版本 0.5.3，但修复了 Android 平台的“返回”按钮
07-12
PhoneGap的inAppBrowser插件是一个非常实用的工具，它允许应用程序在内部打开网页，而无需离开应用本身。这个特定的版本，"inappbrowser-back-button-fix"，是针对标准的PhoneGap inAppBrowser插件0.5.3的一个定制化...
phonegap 修改后的inappbrowser 图片是放到ios中的
11-05
在这个特定的场景中，我们关注的是PhoneGap的InAppBrowser插件，该插件允许应用程序在内部打开一个浏览器窗口，而不是跳转到系统默认的浏览器。InAppBrowser提供了一个方便的解决方案，让用户在应用内部浏览网页内容...
phonegap 中如何直接使用json格式数据
12-24
使用 PhoneGap 直接获取 JSON 数据的一种方法是通过 InAppBrowser 插件。InAppBrowser 打开一个新的浏览器窗口，允许你在其中执行任何 HTTP 请求，包括加载 JSON 数据。以下是一个例子： 1. 首先，确保已安装 ...
In-App_Web_Browser_1_7_4_unitypackage.unitypackage
05-31
Features: - Works on both iOS and Android, - You can communicate with loaded website through simple API (Javascript-Unity back and forth) - You can hide top bar (with title and back button) if you don't like it - You can specify browser's title, back button title, background and text colors - Uses native UI elements (native scrolling performance) - Shows spinner animation while website is loading - Bundled with ready-to-use Playmaker action - Perfect for showing external content, such as Help section, Terms and Conditions page etc. - Show back and forward buttons so user might visit previous sites - Easy integration (no Android manifest merging) - Doesn't require Unity PRO
phonegap-File-Example:如果目录不存在，则创建目录，下载 PDF 文件并打开
07-19
PhoneGap 提供了一个名为 `InAppBrowser` 的插件，可以用来在应用程序内部打开 URL，但默认情况下可能不支持 PDF 文件。因此，你可能需要安装并使用如 `cordova-plugin-file-opener2` 这样的插件，它能够处理 PDF ...
iOS Android phonegap 3.X 开发经历及过程中出现的问题
gzqusername的专栏
05-24 623
最近，做了一个phonegap的项目开发，在这里只讲述phonegap的配置问题。           刚开始在phonegap的官网上下载了phonegap 2.9的版本进行配置然后进行开发，中间没有遇到什么问题，因为phonegap以前的版本中所需要的类库都打包在phonegap中，直接把html拷贝到项目，修改配置文件就可以使用。          在开发的过程中碰到了一
ngCordova插件之InAppBrowser插件的使用
weixin_33991418的博客
03-01 213
2019独角兽企业重金招聘Python工程师标准>>> ...
ionic5使用浏览器插件Themeable Browser与In App Browser
分享技术，传播知识!
10-21 1637
ionic5使用浏览器插件Themeable Browser与In App Browser背景使用方式使用Themeable Browser使用In App Browser完整代码运行效果总结 背景 在使用Ionic开发APP时，为了在应用中打开或嵌入外部服务器页面，就需要用到浏览器插件，在Ionic官网的原生功能介绍中，提供了2种使用浏览的方式，分别为： Themeable Browser，官网地址：https://ionicframework.com/docs/native/themeable-brow
混合开发安卓篇，cordova 使用 inAppBrowser 插件打开网页和根据需求修改该插件的视图
yann02的博客
06-25 2655
一、开发工具： 1、android studio 作用： 1）、运行android和web等平台应用 2）、修改inAppBrowser插件，自定义导航栏视图 2、visual studio code 作用： 编辑www文件夹下的前端代码html和js文件等，编写跨平台前端页面功能。 二、使用inAppBrowser插件： 在visual studio code开发工具中打开项目，找到www/js/index.js，编辑以下代码 document.addEventLi...
Apache Cordova InAppBrowser 插件教程
gitblog_00629的博客
08-06 943
Apache Cordova InAppBrowser 插件教程 cordova-plugin-inappbrowserCordovaInAppBrowser插件是一个浏览器窗口，可在Cordova应用程序中打开网页。它可以作为独立的浏览器运行，也可以嵌入到原生UI中。项目地址:https://gitcode.com/gh_mirrors/co/cordova-plugin-inappbrows...
PhoneGap入门教程2012
" Beginning PhoneGap 2012 英文文档" 《Beginning PhoneGap 2012》是一本专为跨平台移动应用开发者编写的指南，旨在帮助读者理解和掌握使用PhoneGap进行多平台应用程序开发的技术。这本书面向的读者群体是那些希望...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值