How do I use cordova inappbrowser to open links in Ionic/Angular hybrid app

Question

I am working on a hybrid mobile app using Ionic Framework and AngularJS. I am using Ionic Creator & Ionic Lab. In my app, I have several buttons that link to external resources (webpages, mailto: links, pdf files etc). The links work fine when I test them within the browser (Ionic Lab). However, when I test the app in an Android virtual device or an actual device, none of the links are working.

I found a question where someone had a similar issue:

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

I tried Implementing all the proposed solutions from adding to config.xml:

<allow-navigation href="*" />

Installing cordova inappbrowser plugin via:

$sudo cordova plugin add cordova-plugin-inappbrowser

I tried using ng-click="some_function()" instead of href, then defining the function in my controller.

The OP on that question finally resolved his issue by commenting out/uncommenting from index.html:

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

Looking at my browser console logs there was a 404 not found for cordova.js, so I manually added it to www/ from the platform_www/ directory for android, as well as cordova_plugins.js

However after trying all this, the links are still not working. In my consol logs I now get an error saying:

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

But the thing is inappbrowser.js is in that folder!

Please help! I'm at wits end and have no idea what to do next. I have uploaded the sample code I'm working with on github:

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

Software versions:

Linux mint 17.1 node v0.12.2 npm 2.7.4 cordova 6.2.0 ionic 1.7.14

Answer 1

For starters, try changing the way you're calling the open method in your controller code to this:

.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

I have used the inappBrowser plugin with Jquery mobile.It worked fine.

                 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

First, make sure that you have installed the cordova plugin "inappbrowser"

cordova plugin add cordova-plugin-inappbrowser

(see https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html )

Then, you can use for example :

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

the catch block will be used as a fallback when testing the app in a browser.