如何在 Ionic/Angular 混合應用程序中使用cordova inappbrowser 打開鏈接

Question

我正在使用 Ionic Framework 和 AngularJS 開發混合移動應用程序。 我正在使用 Ionic Creator 和 Ionic Lab。 在我的應用程序中，我有幾個按鈕可以鏈接到外部資源（網頁、mailto：鏈接、pdf 文件等）。 當我在瀏覽器（離子實驗室）中測試它們時，這些鏈接工作正常。 但是，當我在 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 mint 17.1 node v0.12.2 npm 2.7.4 cordova 6.2.0 ionic 1.7.14

Answer 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');
        }

})

Answer 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);

Answer 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 塊將用作后備。