如何使用 cordova inappbrowser 在 Ionic/Angular 混合应用程序中打开链接答案

【问题标题】：How do I use cordova inappbrowser to open links in Ionic/Angular hybrid app如何使用 cordova inappbrowser 在 Ionic/Angular 混合应用程序中打开链接
【发布时间】：2016-05-30 17:39:45
【问题描述】：

我正在使用 Ionic Framework 和 AngularJS 开发一个混合移动应用程序。我正在使用 Ionic Creator 和 Ionic Lab。在我的应用程序中，我有几个链接到外部资源（网页、mailto：链接、pdf 文件等）的按钮。当我在浏览器（Ionic Lab）中测试它们时，链接工作正常。但是，当我在 Android 虚拟设备或实际设备中测试应用时，所有链接都不起作用。

我发现有人遇到类似问题的问题：

/questions/33627061/ionic-simple-href-not-working-on-android-device

我尝试从添加到 config.xml 中实施所有建议的解决方案：

<allow-navigation href="*" />

通过以下方式安装cordova inappbrowser插件：

$sudo cordova plugin add cordova-plugin-inappbrowser

我尝试使用 ng-click="some_function()" 代替 href，然后在我的控制器中定义函数。

关于该问题的 OP 最终通过从 index.html 中注释/取消注释来解决他的问题：

<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>

查看我的浏览器控制台日志，发现没有为 cordova.js 找到 404，所以我手动将其从 android 的 platform_www/ 目录以及 cordova_plugins.js 添加到 www/

但是在尝试了所有这些之后，链接仍然无法正常工作。在我的控制台日志中，我现在收到一条错误消息：

GET http://localhost:8100/plugins/cordova-plugin-inappbrowser/www/inappbrowser.js 404 (Not Found)
Uncaught Error: Module cordova-plugin-inappbrowser.inappbrowser does not exist. http://localhost:8100/cordova.js Line: 1421

但事情是 inappbrowser.js 在那个文件夹中！

请帮忙！我束手无策，不知道下一步该做什么。我已经在 github 上上传了我正在使用的示例代码：

https://github.com/chmod-777/link-test

软件版本：

Linux 薄荷 17.1 节点 v0.12.2 npm 2.7.4 科尔多瓦 6.2.0 离子 1.7.14

【问题讨论】：

标签： javascript android angularjs cordova ionic-framework

【解决方案1】：

对于初学者，请尝试将您在控制器代码中调用 open 方法的方式更改为：

.controller('pageCtrl', function($scope, $window, $cordovaInAppBrowser) {

    $scope.open_google = function() {
          $cordovaInAppBrowser.open('https://www.yahoo.com/', '_system', 'clearcache=yes');
          // I also tried this
          //$window.open('https://www.msn.com/', '_system', 'location=yes');
          // and this
          //window.open('https://www.netflix.com/', '_system', 'location=yes');
        }

})

【讨论】：

那行不通。现在可能与我遇到的错误有关吗？：GET http://localhost:8100/plugins/cordova-plugin-inappbrowser/www/inappbrowser.js 404 (Not Found)
在引导或尝试单击链接时是否会发生错误？除了我在答案中的建议之外，尝试从app.js 中删除`window.open = cordova.InAppBrowser.open;`。

【解决方案2】：

我已经在 Jquery mobile 上使用了 inappBrowser 插件。效果很好。

                 ref=null;


                var url= accRestService.someURL;

                if( device.platform === "Android"){
                ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,hardwareback=no,zoom=no');
                }else{
                    ref =cordova.InAppBrowser.open(url, "_blank",'location=no,clearcache=yes,closebuttoncaption=Go back to App,toolbar=yes,presentationstyle=formsheet');
                }


                ref.addEventListener('loadstart',onBrowserLoadStart);
                ref.addEventListener('loadstop',onBrowserLoadStop);
                ref.addEventListener('loaderror', onBrowserError);
                ref.addEventListener('exit', onBrowserClose);

【讨论】：

【解决方案3】：

首先，确保你已经安装了cordova插件“inappbrowser”

cordova plugin add cordova-plugin-inappbrowser

（见https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html）

然后，您可以使用例如：

try {
    var uri = "http://some-example.com";
    cordova.InAppBrowser.open(uri, '_system');
} catch(e) {
    window.open(uri, '_blank');
}

在浏览器中测试应用程序时，catch 块将用作后备。

【讨论】：