Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Open Dynamic Links Using The Cordova InAppBrowser

TwitterFacebookRedditLinkedInHacker News

Previously I had written a post regarding how to use the Apache Cordova InAppBrowser plugin to launch external URLs in an Ionic Framework application. This previous post was basic and was only enough to get you started.

Since then, I’ve been asked a few times how to use the InAppBrowser as the default method to launching URLs. More specifically, URLs that have been created dynamically by users.

This tutorial assumes you’ve read my previous post and are comfortable using the InAppBrowser. If you are, continue to creating a fresh Ionic project for Android and iOS:

ionic start IonicProject blank
cd IonicProject
ionic platform add android
ionic platform add ios

Note that if you’re not using a Mac, you cannot add and build for iOS.

Proceed in adding the Apache Cordova InAppBrowser plugin with the following command:

cordova plugin add cordova-plugin-inappbrowser

This is where things get fun. We are going to use plain old JavaScript, not AngularJS, to listen for URL clicks. If a URL click is determined we are going to override it and perform a custom task. In our scenario, the custom task will be to open the InAppBrowser rather than the default UI route.

Check out the following code:

<script>
    document.onclick = function (e) {
        e = e ||  window.event;
        var element = e.target || e.srcElement;

        if (element.tagName == 'A') {
            window.open(element.href, "_blank", "location=yes");
            return false;
        }
    };
</script>

Now I cannot take full credit for what you see above. I actually got most of it from a post I found on Stack Overflow. However, notice the highlighted line. You’ll notice that we take whatever is in the href attribute and inject it into what we’d normally use to launch an InAppBrowser.

Let’s take care of business and crack open our index.html file. Make it look similar to the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->

        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

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

        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script>
            document.onclick = function (e) {
                e = e ||  window.event;
                var element = e.target || e.srcElement;

                if (element.tagName == 'A') {
                    window.open(element.href, "_blank", "location=yes");
                    return false; // prevent default action and stop event propagation
                }
            };
        </script>
    </head>
    <body ng-app="starter">
        <ion-pane>
            <ion-header-bar class="bar-stable">
                <h1 class="title">Ionic Blank Starter</h1>
            </ion-header-bar>
            <ion-content>
                <a href="http://www.google.com">Testing</a>
            </ion-content>
        </ion-pane>
    </body>
</html>

So you’re probably saying to yourself that this doesn’t look very dynamic. I guess I haven’t sold you yet.

Let’s expand upon this example. Open your app.js file and make it look like the following:

var example = angular.module('starter', ['ionic', 'ngSanitize']);

example.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});

example.controller("ExampleController", function($scope) {
    $scope.myHTML = 'Check out my programming <a href="https://www.thepolyglotdeveloper.com">blog</a> while you are here';
});

If you haven’t figured it out yet, we’re going to make use of the ng-bind-html functionality of AngularJS. To do this, ngSanitize is required, but that is pretty much it.

Go back into your index.html file and make use of this functionality:

<body ng-app="starter">
    <ion-pane>
        <ion-header-bar class="bar-stable">
            <h1 class="title">Ionic Blank Starter</h1>
        </ion-header-bar>
        <ion-content ng-controller="ExampleController">
            <a href="http://www.google.com">Testing</a>
            <p ng-bind-html="myHTML"></p>
        </ion-content>
    </ion-pane>
</body>

It is as easy as that.

If you’re going to allow user generated content I encourage you to use caution. Filter your links and make sure your not directing your users to malicious websites. Don’t let your content providers make the decisions.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site