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

时间:2016-05-30 17:39:46

标签: javascript android angularjs cordova ionic-framework

我正在使用Ionic Framework和AngularJS开发混合移动应用程序。我正在使用Ionic Creator&离子实验室。在我的应用程序中,我有几个链接到外部资源的按钮(网页,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 =&#34; some_function()&#34;而不是href,然后在我的控制器中定义函数。

该问题的OP终于通过评论/取消注释index.html来解决他的问题:

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

查看我的浏览器控制台日志,找不到有关cordova.js的404,所以我手动将其添加到www /来自platform_www /目录的android,以及cordova_plugins.js

然而,在尝试所有这些之后,链接仍然无效。在我的consol日志中,我现在收到错误说:

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 cordova 6.2.0 离子1.7.14

3 个答案:

答案 0 :(得分: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');
        }

})

答案 1 :(得分:0)

我已经在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);

答案 2 :(得分:0)

首先,请确保已安装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块将用作后备。