Open Dynamic Links Using The Cordova InAppBrowser

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:

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:

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:

Now I cannot take full credit for what you see above.  I actually got most of it from a post I found on Stackoverflow.  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:

Notice that the highlighted lines are the only things I added to this fresh project.  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:

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:

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 is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Rajat Paharia
    • Thanks for linking to this! It looks like a perfectly suitable alternative to what I wrote.

      Regards,

  • Dude, I’ve read some of your post and this is the first time I’ll leave a comment: you’re awesome! Thank you so much for sharing this valuable knowledge in angular.js + cordova + ionic. Havent found a resource with great context as you provide.

    Hope in 2015 you keep writing more of this stuff and thanks again.

    Happy new year!

    • No problem. Thanks for the compliments. Got some more good things coming 🙂

  • Jon Hines

    Strange on mine if I disable the $scope.myHTML and input normal href as in your example above then it works. Otherwise I get just a white screen below the header bar, thnx for the article.

    • That’s strange. No problem on the article though

  • vilavgfx

    Hi Nic. Kick ass tutorial, a pure JS solution got me moving faster.

    In the app I am building, I have multiple app pages as separate HTML files, bundled in Phonegap. So a link on index.html takes the user to contact.html, for example. This link is also triggered through an anchor tag.

    Q1: Is there a way to allow only certain links (e.g.: to external HTTP websites only) to open in the inAppBrowser and not all links. Can there be an id / class defined as an identifier, that triggers the app to launch the link in the inAppBrowser.

    Q2: If you have a twitter button in the app that links to an twitter account, is there a way to open the link in the native Twitter app. If the app is not present on the device, only then does the Twitter link launch in the inAppBrowser:

    if > Device Has native Twitter App installed > then > launch link in Twitter app
    if > device has no twitter app installed > then > launch link in inAppBrowser

    Cheers!

    • In the code I provided, look at this specifically:

      You can do a few different things here. Instead of element.tagName you could do element.className at which point the code would be triggered only based on certain classes being clicked.

      If you’d like to continue using element.tagName you could add to the logic for specific pages. Something like this:

      In the above code, it would only use the InAppBrowser if the URL contains http://www.facebook.com.

      At this point, I’ll let you tweak what I’ve provided to play on your imagination.

      In regards to your Twitter question, you’re not going to be able to accomplish this via URLs alone. If you want to see if Twitter is installed, you’ll have to use a plugin. For example, this plugin exists:

      http://ngcordova.com/docs/plugins/appAvailability/

      Regards,

  • This is causing my side menu to open in the InAppBrowser. How can I prevent this behavior?

    • Since my app uses relative links throughout, I ended up adding a regex test to detect full URL’s.

      • All good now?

        • Yes, I believe so. Of course my solution does not work when using ionic serve. Do you have a more eloquent solution?

          • I don’t recommend using ionic serve. That is a convenience tool that is still alpha / beta.

            Like I tell everyone, you’re developing mobile applications, not web applications. Do yourself a favor and compile and install to a device or simulator like you would native. Convenient? No, but it will give you the best and truest experience.

            Regards,

  • Filippo Benassuti

    Thanks Nic for this tutorial, and others too.
    I’m doing my app really fast following your tutorials.

    Just a question. Do you know how to hide the href link that appear at bottom of the internal client when link is open?

    • I’m not sure what you mean. Can you please explain further?

      Thanks,

      • Filippo Benassuti

        After I click on the link the inAppBrowser show up and my document, is visible. So all is working.

        At bottom of the inAppBrowser there is the bar with the “End” link that close the InAppBrowser.

        Before that bar the link of the document “http://…” is visible.

        How can I hide that link of the document?

  • Luis Troya

    The window.open should’t be _system as the previous example?

    window.open(element.href, “_system”, “location=yes”);

    • Depends on what you want. _system will open a system browser where as _blank will open an Apache Cordova browser.

      Your choice 🙂

  • Joe Rau

    Thanks for this helpful tutorial.
    My app shows the content of a wordpress site and with your script I am able to display dynamic links in the InAppBrowser.
    This works with url from external sites, but not with images like this example.

    • I’m not sure what you’re after. Are you trying add a hyperlink to an image? This tutorial demonstrates how to use the InAppBrowser as the default solution when it comes to opening hyperlinks. I am having trouble understanding where images fit into this.

      In AngularJS you need to use ng-src instead of src when trying to populate images with dynamic AngularJS objects. But again, I don’t know what you’re after.

      Regards,

      • Joe Rau

        The image is part of the wordpress content, but it is whithin its own a-tag hyperlink. When you click the image, the link opens the image, but not in the InAppBrowser. I`d like to show you this link, but when I type the link in this window, the html a-tag href things disapear when I hit return. How can I send you the link?

        • Anything you want to show me, please put on Gist / GitHub. I still don’t know what you’re after, so maybe showing me something will make it more clear.

          Regards,

          • Joe Rau

            The hyperlink is not a text, it is an image. When I click on the image, the hyperlink opens, but not in the InAppBrowser.

          • How do you have hyperlinks that are not text?

            For me to help you any further I’m going to need to see sample data and code via a Gist.

            Regards,

          • Joe Rau

            The content of my app are coming from wordpress, which I can´t change. There are sometimes images with a hyperlink. Hope the gist-link works.
            https://gist.github.com/joerau/9365e774d50a66984ba0

          • Seems like that should open fine with the InAppBrowser plugin. I’m wondering if the InAppBrowser cannot directly open images.

            You may want to open a ticket with the developers as I can’t see anything wrong.

            Regards,

          • Cory Smith

            Thank you for the excellent tutorials. Been fumbling my way through this stuff, and came across this same exact situation. after some trial and error I came up with a solution for us (no idea if it’s any good, but it’s working). WordPress outputs it’s images with the anchor tags surrounding the img tags, so the script isn’t recognizing the click element as an A tag. (it’s seeing the img tag). I modified your snippet to add a second if statement to look for image tags.

            if (element.tagName == ‘IMG’) {

            so this works and it pulls the image src as the destination URL, it would be great if it could pull the parent A href value. No idea on that one 🙂
            Thanks again!

          • Glad you got everything working and thanks for the compliment!

  • Joe Rau

    here is the complete link

  • Joe Rau

    The link are not complete when I enter the post.
    It starts: <a href=”http://www.dummy.com… ” <img class=” … height=”341″>

  • Joe Rau

    Sorry I can`t type the hole link, when I press enter the “<a href…” disapear.

  • Haytham Labrini

    Hey Nic,

    Really thankful for all your tutorials.

    I made everything work on an android app, but when I launched it on an iphone, it always open on the same webview, and I tried _system and _blank. I would like to open it in Safari, any idea on how to solve this?

    Thank in adavnce~

    • Maybe your plugin did not install correctly for iOS? Try removing the plugin, adding both your platforms, then re-adding the plugin.

      • Haytham Labrini

        Great call Nic,
        I should always do that everytime before I ask for help~

        I have a question, out of scope though,
        I would like to restrict that behaviour to only on section of the app, how would you go for doing that?

        Cheers,
        Haytha,

        • Haytham Labrini

          As for now, I used ng-click on all the other links I have in the app to cancel that unwanted behaviour.
          But I would like to use that code in a very restricted DOM, as it would be more helpful that way.

          • Instead of looking for a particular tag name you can look for a particular class name. Then all links that have a particular class will be opened with the InAppBrowser. I’m sure there are other ways to do it as well, I’ve just given you one 😉

  • Dan
    • Awesome! Thanks for the compliment 🙂

  • Taranjyot Singh

    Hi Nic. I need your help .I am opening google page using inappbrowser in my ionic app. Then the user search something . I want when the user clicks on any search result , it should open in the phone browser , rather in the same app. Please see my controller below

    .controller(‘ThisCtrl’, function($cordovaInAppBrowser, $ionicPlatform, $rootScope) {

    var options = {
    location: ‘no’,
    clearcache: ‘yes’,
    toolbar: ‘no’,
    enableViewportScale: ‘no’
    };

    $ionicPlatform.ready(function () {
    $cordovaInAppBrowser.open(‘https://google.com’, ‘_blank’, options)
    }, false);

    $rootScope.$on(‘$cordovaInAppBrowser:loadstop’, function(e, event){
    $cordovaInAppBrowser.executeScript({
    code: ‘document.addEventListener(“click”, function (e) { var element = e.target || e.srcElement;if (element.tagName == “A”) { window.open(element.href, “_system”, “location=yes”) return false; }});’
    });
    });

    });

    • Judging by what you pasted it looks like you didn’t read my tutorial at all or you skimmed over it. I am not using ngCordova, something you are clearly using. I’m also not having the InAppBrowser run any scripts.

      I encourage you to re-examine my article and try it the way I’m doing it.

      Regards,

      • Taranjyot Singh

        Hi Nic, I understood your article and it is running well. I am trying to go further with this trying to achieve written in my previous post. I want to execute script , so that if someone clicks on google search it open in mobile browser rather than in the “inappbrowser” .Do you have any suggestions for this

        • If you use _system instead of _blank it will open the system browser. I honestly don’t understand what you’re after if that isn’t it.

          Regards,

  • John B Dougherty

    Many thanks Nic. Just to get my feet wet, I have generated an android app basically just pasting from http://silvervalleyreview.com/rss/script.html into the blank template

    silvervalleyreview.com is my little sandbox, and anyone who would like to use that script is welcome.

    That script is by Jack Herrington and is the conclusion of his IBM Developerworks Ajax RSS Reader article from May 2006. I have modified the server side to run Simple Pie.

    As stated in a comment to the answer at Stackoverflow is that if more anchor elements are added programmatically (i.e.: content loaded with Ajax) after this event is binded, it will continue to work for those new anchors. This is especially useful in this application.

    Just one question – I think I still need to declare cordova-plugin-inappbrowser

    document.addEventListener(“deviceready”, onDeviceReady, false);
    function onDeviceReady() {
    window.open = cordova.InAppBrowser.open;
    }

    before the logical OR short circuit routine?
    (I have, and it works)

    • Don’t take this the wrong way, but I am incredibly confused on what you’re trying to share here. Are you making a statement or a question?

      Best,

      • John B Dougherty

        Not sure what version you’re running but without some kind of declaration I get a cordova undefined error, and I don’t see InAppBrowser anywhere in your index.html example.
        Have you placed a declaration in an external js called by index.html?

        • I’ve found that simply installing the plugin will enable the InAppBrowser. Mind sharing your logs so I can see the error? Not just the line, but everything around it.

          Regards,

          • John B Dougherty

            Thanks again Nic. I just commented out the statement I thought was required and re-built and installed the apk, and it totally works. For future reference, do you mean console logs of the running app or logs of the build process?

          • The running application 🙂

          • John B Dougherty

            only two different lines in the log output repeat one warn and one error:

            0 448700 error No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.

            1 458706 warn No Content-Security-Policy meta tag found. Please add one when using the cordova-plugin-whitelist plugin.

            I have not installed or called cordova-plugin-whitelist

          • Yea you might want to read my whitelist post:

            https://www.thepolyglotdeveloper.com/2015/05/whitelist-external-resources-for-use-in-ionic-framework/

            Should solve that problem no problem!

            Best,

  • Shrikant

    hii, thanks nic for this tutorial, can i open a url in appbrowser when page is load,please help me what i do for open url on page load

    • I don’t know what your end goal is. Can you please explain with a real example?

      Best,

      • Shrikant

        i wnat to open facebook page when page is load in div of page and another div with some content of my app i try some code but that open in laptop but after build that not work on app.

  • Luís Cunha

    Is there a way to make all links open with the inappbrowser by default? I’m trying to open all links with the system browser by default instead of inside the webview.

    • Follow this guide and switch _blank with _system. It will then open all URLs in the system browser.

      • Luís Cunha

        Thank you for your reply, I actually misread the article title and thought it was just about simply opening links.
        I may be mistaken, but doesn’t this only intercept links on anchor tags? If so, if I want to intercept everything (ion-item, div, etc.) do I have to replicate it for each element I want to monitor, or is there a way to capture everything?

        • Yes you’re right, but those other scenarios are beyond the point of the article. The point is to be able to take random HTML data, whether it is scraped from a website, received in a web service request, etc. and then open it in an external browser when someone clicks it. This is data that would have probably never been parsed or sanitized after receiving it.

          In your scenario with tags, I’m going to take a wild guess and say you already have control of the link that the ng-click events are using. Why not just create a function called launchURL or something where you pass the URL from the tag into this function for it to launch in the InAppBrowser?

          • Luís Cunha

            You are correct, in the specific tag examples I presented I already have control and am launching them in the system browser.
            My main issue is that my app user google maps and they come with a lot of embedded links which I need to intercept, otherwise, on iOS, they all open in the webview and the user is stuck on that screen without any way other than killing the app to regain control. This issue is specific to iOS, as android opens all gmaps links in the system browser.
            Most of them are anchor tags, but some aren’t and I have to intercept them all, which lead to my previous question.
            So what would be a good way to deal with this?

          • Unfortunately, I think the only way is to intercept any tag that has a link. If there are other ways, I think it is outside my skill level when it comes to JavaScript.

            Sorry,

          • Luís Cunha

            No need to apologize, as your article presented me with an actual solution which is a lot more than what I had before I read it.
            Thanks for the useful post.

          • If you do end up finding an easy solution, please come back and share in the comments 🙂

          • Luís Cunha

            Will do =)

  • Ramez

    Great tutorial Nic, thanks!
    A quick question, can we resize that browser? I.e. can the in-app browser show on top of the current webview (the one that contains Cordova). We are trying to build an in-app browser (with tabbed browsing, i.e. multiple webviews open) and wanted to see if it was possible with this plugin. Thanks a lot!

    • I honestly don’t know, but if it is, I wouldn’t recommend it. Kind of defeats the purpose of having a mobile application when you’re still rending things from the internet.

      Use APIs and render the response data. Your users will be more appreciative when they have a better performing mobile application to use.

      Regards,

      • Ramez

        Thanks Nic for your reply. Essentially we need a real browser within our app as it is controlled browsing environment for education (we don’t know in advance what sites will be browsed). Any insight would be appreciated. Thanks again!

        • Yea I wouldn’t do any of that. I’ve never seen a quality app that functions that way. If you have any intention of using the web browser within your application other than opening links, you’re best off not making a mobile application. You’re best off just making a mobile website instead.

          Just my honest opinions to you. I’ve developed many apps and I’ve used many apps. I’ve received many reviews and given them as well. Your app would get torn apart with negative reviews based on what you described.

          Best,

  • Max Carlquist

    Hi Nic. I’m trying to connect my app with the imdb.com site using this –> IMG however when I run the app ( ionic emulate ios), when I click it, it greets me with the image I’ve supplied. How can I get this to work, and what am I doing wrong?

    Max

    • I don’t understand what you’re trying to do / what the problem is. Can you try again with more depth?

      Best,

      • Max Carlquist

        Yes of course. I’m trying to make an app, using ionic, to create a movie database using http://www.omdbapi.com/ api. Here when the movie info comes up, after clicking the ng repeat movie in movies, the user goes to the specific movie information of what the user pressed. It is here that I show the relevant plot, poster, and what type of movie it is. Also at the bottom I would like to have an imdb image logo, when pressed takes the user to the _system browser of that specific movie’s imdb page. the code for that link is: . However the link takes the user to this page instead (refer to attached image). What am I doing wrong in that I can’t create a dynamic image. the {{imdbID}} is the imdb id tag associated to the last part of the imdb.com url (www.imdb.com/tt920394).

        the part of the dynamic link of the onclick is: onclick=”window.open(‘http://www.imdb.com/title/{{imdbID}}’, ‘_system’, ‘location=yes’); return false;”

        • I think I see now.

          Although your links are dynamic, they are not dynamic in the sense that I was trying to demonstrate. My sense of dynamic meant URLs that might have been scraped from HTML that you didn’t format yourself. Your sense of dynamic are URLs that have a dynamic parameter on them. Although both dynamic, different types.

          With that said, I would actually create a function in your controller for what you’re trying to do. Instead of doing onclick do an ng-click that calls the function. For example:

          ng-click=”launch(imdbID)”

          Notice I pass the imdbID into the function. Then in your JavaScript you could have something like:

          $scope.launch = function(id) {
          window.open(“http://www.imdb.com/title/” + id, “_system”, “location=yes”);
          }

          If that doesn’t work, you might want to validate that your imdbID does in fact have a value in it.

          Best,

          • Max Carlquist

            Thank you nic! I’ll post back here if I succeeded :). Have a great day, as you made mine.

            // Max

          • Always happy to help. Let me know how it goes 🙂

          • Max Carlquist

            Hi again, It is unfortunately not working but I am getting a value for id (tt0462538 is the id for the simpsons movie if your interested 😛 ) also it does open a new window (in chrome) but when i try to emulate, it goes first to the main screen (where the search occurs) and then opens within the app, but not inappbrowser. I can share my code if you’d like if you need more clarity.

            //Max

          • Yea throw it up on GitHub and I’ll take a look. If your project is chaos, please direct me to the chunks of code that matter.

            Best,

          • Max Carlquist

            Hey Nic! I’m sorry I havent written in a while, I did though get it to work! I combined the use of whitelist (dunno if it was necessary, but it was a problem with my iOS simulator and got it working using ionic view. :p Thanks for the effort and help.

            // Max

          • Careful with ionic view. Using that could turn into a bad day real quick.

          • Max Carlquist

            How So?

          • ionic serve, ionic view, and ionic live-reload are all alpha / beta and are known to have problems with MANY plugins. I get a lot of comments daily and 90% of the problems that I help resolve are related to one of those services.

            90% is a high number for failure.

            I recommend developing, testing, and deploying only through the standard build process just like you would a native app.

  • reddysridhar53

    Hi Nic, thanks for an elaborate tutorial, in my ionic application even the side menu items are taken as external links. How can avoid this?

    • Does your side menu use ‘a’ tags instead of ‘div’ tags?

  • Krisid Misso

    Hi Nic,

    Thank you for this tutorial. But I am facing a problem with the script: When I have other divs inside the A tag im able to click only in the blue area (formed by padding). When i click inside any of the divs, including image, it doesnt get the click event. Can you please give me a hand solving this problem?

    • Yea I’m not sure. Sounds like a markup issue, not an issue with my code.

  • Raja Mohammed

    Totally drained before i saw this . Thank you very much .

  • Raja Mohammed

    A small tweak for those using “ui-sref” which could translate to anchor tag .

    document.onclick = function (e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    var htpattern = /^(http|https):///i;

    }

  • Alex

    Hi Nic,

    I have been researching how to do a simple iframe wrap of my dynamic website into a hybrid app for a while now and as much as I have learned I am still really confused as to how to do something that I feel as though is really really simple!

    From my understanding I thought Apache Cordova/PhoneGap was meant to be a really easy way to wrap any website into a cross platform app.

    Obviously for a static website such as lets just say a city bus website schedule that you want to wrap into an app for users that do not have data on their phones for offline mode reference you would build and compile your html, css, js and phonegap would spit out your app with the addition of adding an icon and splash page.

    Now as for my app I simply just want to do the same only for my case my website is dynamic.

    I have a very good fully responsive website that looks great on a mobile browser and just want to have a dedicated app for it so it can be published on all the app stores.

    Besides just adding an icon and splash screen I figured I’d make a new mobile app domain that would cut out a lot of features and menu items in my overall website so I can just focus on main web app features.

    I also want to use Ionic to make 3-4 tap-able icons at the bottom of my app that would simply be my app version of main nav bar for different menu items of my site.

    Now using Ionic hybrid app SDK to make this app main nav bar is really all I want to do and then after that I want these clickable icon buttons to just call my working responsive website.

    The biggest problem I am having is trying to understand the difference between inappbrowser plugin and native web view.

    The example I made with simple static website being wrapped via phonegap without doing ANYTHING makes sense to me, but when it comes to wrapping dynamic website I don’t understand why this gets to be so complicated!

    Even without using Ionic SDK to make my UI in web app language even just to simply wrap my dynamic website into an app with icon and splash screen and simple code to check for internet connection and if no data display a simple page with frown face saying sorry no internet so I don’t get rejected by Apple store how can I just load my website into this app if there is an internet connection and have the experience be the same as if in app browser only without the option to open new tab of course and not see the url domain.

    I have read some articles that say just put js code into your html to load from your server, others say I need to use inappbrowser plugin since my site is dynamic, others make it even more complicated and talk about jquery mobile or firebase or backbone.js or some database api…it’s just all really confusing to me.

    For now I do not need to worry about push notifications and since I already have a working LAMP stack website I do not need to use telerik or some other app hosting service for “app world” hosting and database + push notification service.

    Lol I just want to wrap my website into an app!!!

    Please help me!!!

    While doing research I have stumbled upon the same article republished on 5 different websites and just when you think you find an answer on stack exchange the top rated reply is the same author as the guy that has the same article published everywhere I look!

    Researching the forums on ionic have nothing for my dynamic website problem and have also tried phonegap forum, apache cordova
    google group, multiple articles on web, youtube… I’m honestly baffled that this simple use case doesn’t have tons of simple tutorial videos and articles/documentation!!!

    To be honest your page is the CLOSEST I have gotten and checked out your other video and know this should be really easy so figured I’d ask for your help and perhaps as a result of clearing this up for me you can make another article on your site as to how to make an app for ANYONE with a mobile website dynamic or not because you would just be calling it from the website server, but of course would really be for dynamic sites because if static phonehap build would already be doing that for you anyways.

    Pheww that was a lot, but I can’t believe 3 days looking into this I still am clueless and there is no one in the community with good articles and how-to tutorials.

    We need you to be our savior!!!

    • Hey @disqus_RAUZzdRE4J:disqus,

      A few things and don’t take this the wrong way as I do want to see you succeed.

      If you’re using Apache Cordova to wrap a hosted website, you’re doing it wrong. If you’re using Apache Cordova to wrap anything you’re doing it wrong.

      While you can wrap things, doing so will give your users the worst possible experience imaginable.

      With mobile applications you want to build static templates and consume remote and dynamic data through APIs.

      Best,

      • Alex

        Yeah I agree it would be nice to make a good UI using Ionic which I still plan on doing just to add some UX functionality to the app world such as the “app” main nav bar at bottom maybe with animation or swipe left/right support on top of tap function to switch between menu item pages.

        Also, maybe add a pre-loader with my company logo and loading…animation which there is webapp component for my Joomla! site that does that already to make it look less like a website being loaded than an actual native app.

        I have been looking into this for about a week now and thought it would be really really easy.

        For some reason I thought if you have a good responsive website with toolbar and feed function etc to wrap it into a hybrid app using apache cordova/phonegap would be a breeze, but as I continue to research it looks like sdk tools such as ionic are there to allow app developers to make a cross platform hybrid app using web app language from scratch and NOT meant to just be used to wrap already existing dynamic sites.

        I have been playing around with Ionic and think it’s cool that you can use web app language and their SDK to quickly make a cross platform app and publish it to all stores pushing it through phonegab, but what about users who already have a good webapp?!?!

        I agree to just wrap website without any additional UX would be pointless since users can just go to my website via phone browser, but something about having that app on every store when you tell people about it just sounds more legit to me and don’t see why the performance or UX would be so bad.

        It looks great on a mobile browser and the UX is great I just want the added benefit of being able to say I also have an app for it. Who doesn’t?

        Really and at least for now all I want is an app that when clicked would be the same experience as my mobile version of my website as if it was my own propriety webkit based browser app for mobile so no topheader view to see the url/point to new url and additional browser function such as new tab.

        Eventually I can get to the point where I learn as you suggest to make static templates for the menu items I have and then link that up to the dynamic data through an API, but for an immediate solution why does inappbrowser plugin not do the job properly, or as another article tutorial said (lol the one that popped up everywhere) just use js and ajax to call it in from website server.

        Also, and very noob understanding, but I thought even if your mobile site WAS dynamic phonegap could take your entire website public_html/htdocs and save all of that locally into the hybrid app so when user goes to download app from store and then once the user has downloaded app with all necessary html, css, and js already on the app the UX would be in theory faster than mobile website experience because browser does not need to request html, css, and js it just needs to load some of the content, thus adding to the UX and adding a benefit for doing what I’m trying to do.

        Kind of like in phonegap documentation have some things be local and native that does not need to be loaded from server and then webview for the stuff that does.

        Lol I thought it already did all of this for you.

        Anyway, moving forward, even if not adding a lot to UX is it possible to just wrap a dynamic website into a hybrid app?

        And how would you do this?

        Just add js ajax into index.html?

        Use inappbrowser plugin?

        Later on could I use Ionic and make that app navbar in Ionic and then have those link to dynamic webview for each menu item from my website, but as a hybrid app with some “native” local toolbar/mainnav stuff and then the rest webview call?

        Would I still have to use inappbrowser for that dynamic webview?

        And lets say I DO want to do this right – how would I go about building static templates and load dynamic data from my LAMP stack server via an API?

        I don’t mind doing it the right way, but even to do this I don’t understand why it’s so difficult to find good tutorial material on how to turn dynamic website into app which I thought would be the highest use case of apache cordova/phonegap rather than just using it to make an app from scratch.

        Thanks, I really do appreciate the quick reply and I think it would be a good idea for you to make a few new posts with video tutorials helping users like me do stuff like this because I feel as though I am not the only one!

        I looked into your video tutorials and do not mind paying for education on how to do things right, but have found it very hard to find good content on how to do what I want!

        Maybe you can make a niche hybrid app dev tutorial website 😛

        PS. I got to your site via a Google for “inappbrowser dynamic website” and you were the fist relevant hit so I feel like my app rests in your hands lol but seriously just searching for “wrap dynamic website into an app” gives terrible info – just the guy that says use ajax to call your site and got far enough while researching and reading that I think it has something to do with inappbrowser.

        • The InAppBrowser should be treated as a method for loading external content that you have no control over. For example maybe you have an app and you want the user to visit your website, you would include the InAppBrowser so they can visit your site.

          The point of this tutorial was to override links captured via an HTTP request to display in an InAppBrowser rather than screw up your app. For example if you built a news app that reads RSS feeds. Often feeds will include links and you don’t want to open those links in your app.

          Dynamic data versus wrapping a website is different.

          If you want to learn Ionic, I have more than 200 posts on the subject on this blog. The search feature can help you get around. I also have a paid premium beginner course in the courses section.

          If you can’t find content on this blog, you can always request a tutorial here:

          https://www.thepolyglotdeveloper.com/2015/07/what-programming-tutorials-do-you-want-to-see/

          Finally, and I never thought I’d say this, but please cut down your comment length. I get so many comments daily that I don’t have time to read a book. I prefer straight to the point. People say I’m like a robot for this, but it helps get stuff done.

          Best,

  • Afrim A.

    Hi Nic, I am trying to implement an payment gateway form for my app using inAppBrowser and I need to pass an json array with data such like amount,customer name,and some summarized personal data to the external form where the payment will be done (there will be entered payment data like card number and so on). I’m using executeScript to do this but at the payment form I get [object HTMLSpanElement] no data are passed from the controller. Here you can find the code: http://pastebin.com/TFSRFCsQ
    PS: I didn’t post the code directly here because it would be a mess

    • I wouldn’t do that. If you need to pass in parameters to a payment gateway, they should be query parameters in the URL. This is how most sites do it (PayPal, etc.).

      This question isn’t really relevant to the topic I wrote about. I try to keep comments on topic. You might move your question to the following if my answer wasn’t enough for you:

      https://www.thepolyglotdeveloper.com/2014/07/launch-external-urls-ionicframework/

      Best,

      • Afrim A.

        Anyway thanks for the reply, btw I’m not passing sensitive data via that url I’m just sending the amount the user has to pay to the payment form located into that azure URL from there the payment is done into the payment gateway side for that I’m using the inAppBrowser.

        PS: Where I could ask you an off-topic question about relative url for templateUrl inside custom directive… I can’t get it to work

  • technotip

    Everything works fine ..but what if when the image is being hyperlinked?
    In that case the URL isn’t opened in the browser – there is no reaction for the click event 🙁

    How do you think it can be fixed?

    • You might send a message to the Ionic developers. If click events don’t register on images at all, then maybe they are overriding them somewhere. The code I shared should work regardless on what the hyperlink is attached to.

      Best,

  • louis lavin

    Hi Nic, I have been trying to follow your directions but I have not been successful. Can I just add this script to the index.html?

  • Hi Nic!

    something strange is going on here when I try your tutorial…

    If I write the myHTML as yours ($scope.myHTML = ‘check it here. It is awesome’;) both on the genymotion emulator and the android mobile phone, it doesn’t ‘get’ the link but it shows the word here as a link (blue text undelined). BUT if I write the link wrong, that is “http//www…” it does ‘get’ the link but, obviously, gives an error because no such a destination exists… On the navigator, the link works fine but has no sense because I can’t use the inappbrowser.

    Any idea what happens?

    Thanks
    Abel

  • Pedro H.

    Hi Nic. Can you help me?

    How can i do that without open a webpage without click in a link or button? I would like to show a webpage inside the app without navigations bars or nothing more. And display some ads using admob.

  • saiyad husain

    Hi Nic ,
    I have follow all the instruction you have given and created android build , installed apk in device try to open link in device its opening but not with inAppBrowser close and prev and forwd option . please help me

  • Kamaro Lambert

    How can I handle no internet error?

    • You can use the network plugin to determine this ahead of time