Launch External URLs with IonicFramework

I recently found myself needing to launch external URLs with IonicFramework.  I needed to let my users contact me via my personal website or visit my Twitter page.  This is not a task that ends well when trying to execute from an Ionic view.  Luckily, with a little help from the Apache Cordova plugin InAppBrowser, I was able to accomplish the task with very little effort.  The best part is that it works for iOS and Android with the same code set.

If you’re using Ionic 2, a special version of this article can be found here.  Otherwise enjoy this writeup for Ionic Framework 1.

To make use of this great plugin, using a command prompt navigate to the root of your Ionic project.  Run the following command to download and install the InAppBrowser plugin to your project:

From this point, you don’t need any extra code in your app.js file.  The launching of external pages can be done directly from your view.  Take the following example:

As described in the wiki, there are several ways to launch the InAppBrowser and all perform differently.


Code Description
window.open(‘http://example.com’, ‘_system’); Loads in the system browser
window.open(‘http://example.com’, ‘_blank’); Loads in the InAppBrowser
window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view

I personally prefer the native experience which the _system option seems to provide.  Note that if you run the InAppBrowser code via a web browser it will just open a new page.

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.

  • Thanks bro i had several hours searching for a good tutorial about this.

  • Jon

    Hey Nic,
    on one of my app that I’m working on that utilizes the inAppBrowser plugin.
    When I upload the app to my phonegap build and download into my device (android).
    Everything works fine but once I open up a page to an external url.
    I can’t get back into the app unless I close it up and reboot the whole device.
    Any thing I should check?

    • Hi Jon,

      What are you using as the target? Are you using _blank or _system? You should be presented with a little ‘X’ in the corner if you’re using _blank and this should close the browser and return into your application.

      Please paste a chunk of your InAppBrowser code if possible.

      Cheers,

      • Jon

        This is what I have in the js file
        $scope.browse = function(v) {
        window.open(v, “_blank”, “location=no”);
        }

        • Ah, I see it now.

          You don’t see the ‘X’ because you are choosing to hide the navigation bar. You must use location=yes for options. I think the only other way is to inject JavaScript into the InAppBrowser. If you’re daring enough to make these injections, you can implement your own way to call the .close() method.

          Hopefully this helped.

          • Jon

            ok, I’ll give it a shot.
            I do have another q, which relates to data.
            Should I just ask from your http articles? to keep it relevant.

          • Yes please!

            If it isn’t relevant to any of my posts, you can also email me your questions.

            Thanks,

          • Bogdan Nechyporenko

            For me it doesn’t work. Only one thing which helped me to create such approach:
            authWindow.addEventListener(‘loadstart’, function (e) {
            ….
            setTimeout(function () {
            authWindow.close();
            }, 600);
            ….
            });

            And what I figured out in experimenting with code, that the problem with closing the window comes when I have code which resolves/reject promises inside of loadstart callback.

  • Hi,

    I have a lot of user data which may contain links. I do not wrap them with any special code but I am using the InAppBrowser plugin, so they open fine.

    However, there is no ways to go back or close it (not even the Android back button works). I saw your comment above about using the location bar, but I have not added any specific code to open the windows – it just seems to intercept the A href call…

    Any ideas how to go back?

    Regards
    Rodney

    • Hi Rodney,

      I’m assuming you’re trying to view HTML from a remote source? I don’t think this is recommended when making hybrid apps with Apache Cordova.

      Any time you need to navigate to a resource external to your application, I strongly recommend following the InAppBrowser documentation. By showing the location bar, it includes a close button that allows the user to close the browser and return safely to your application.

      If you’re using basic href tags, I recommend they only be used with the ui-router for internal resources. Any external resource should be loaded with the slightly more complex InAppBrowser calls.

      I hope this helps.

      Regards,

      • Hi Nic,

        Thanks for the quick response.

        Yes, it is a remote source – let me explain my user case. On PokerDIY, anyone can submit a game (there are almost 10k around the world now). So users can put links into their Game Ad summary. I show these in my app and just wrap it with a ” ”

        For example, check this game on the web (the More Info box): http://www.pokerdiy.com/poker-game/home-poker/view/poker-game/37096/laurel-home-poker-game.aspx

        I cannot parse each Summary and do a Regex or some other kind of conversion to make any links (IF it contains links) open with a specific set of HTML (ie. I can’t follow the InAppBrowser conventions).

        So how would you handle this situation when the links are in user-generated data?

        Regards

        • Hi Rodney,

          If found the following in a Google search for you:

          http://stackoverflow.com/questions/1760096/override-default-behaviour-for-link-a-objects-in-javascript

          Now take a look at the following code I cooked up:

          Instead of alert(element.href); I think you would probably want to do the following:

          That should make all links open with a location bar and close button.

          Let me know if you need further help.

          Regards,

          • Rodney

            Hi Nic,

            I appreciate you spending time on this!

            Your solution works to a degree, however the click event does not seem to stop bubbling up.

            To contain this to just the element where the link is, I put an event handler on the div:

            Then I have tried a variety of code 😉

            On the phone, the link opens in the System browser (I am doing this for testing) BUT when I go back to the app it has also opened the InAppBrowser. ie. it did not cancel the call. If I run it on an iPad using _blank then it opens the InAppBrowser with the DONE button however this does not work on Android (it does not open with the Done location bar.

            But I will keep playing with it – I am sure I am close (I have been reading up on http://stackoverflow.com/questions/3076642/how-to-stop-onclick-event-in-div-from-propagating-to-the-document)

          • Hi Rodney,

            I believe by default, iOS will have a Done button regardless how you open the browser. However, Android will only have one if you use _blank. You should note that the two browsers are not the same between platforms. On Android, instead of a Done button, you will have a little x at the top right next to the URL bar.

            If I understand you correctly, the code is launching an InAppBrowser as well as performing its default process, thus two browser navigations. Am I correct?

            I have not tried this, but would the following correct the problem?:

            Notice the e.preventDefault(); that I added. I’m wondering if that would work for you?

            Let me know what happens as I’m very curious. You are starting to explore beyond what I have.

            Cheers,

  • Rodney

    Actually… even on the iPad, with _blank, it opens a window WITH the bar, then you close that and the app has the InAppBrowser WITHOUT the bar…

    • Please see my comment regarding e.preventDefault();

      • Rodney

        Hi Nic,

        Alas, e.preventDefault(); does not work either – it is opening 2 windows – 1 for the window.open and 1 for the default click… it looks like it is not cancelling the event for some reason. I’m going to look at it in more detail later as it is a low priority issue (only 0.5% of Games on PokerDIY have external links) – thanks for your help.

        • Sorry I couldn’t be of further help. You’re escaping my knowledge scope with this one. Post back in the comments if you find the answer in the future.

          • Rodney

            Will do! Appreciate the help…

  • Kreston Shirley

    Thanks for this tutorial!!!

  • ramesh balakrishnan

    just great 🙂 ..looks like you are only one covered this topic apart from official document…thanks

  • MONTY UBBEY

    Hello Nic , I had started working in Ionic , but getting from in navigation from one screen to other by useing ionic-ui-view..
    Plz help
    Thanks

  • Ola

    This article was very helpful, thank You!

  • Oak Krittee

    Hi Nic,I try open http://www.youtube.com and play it but not work.
    alert > Unfortunately myApp has Stopped. and myApp stop.
    (not work for youtube only)

    • What do the logs say?

      • Oak Krittee

        Run on simulator and real phone not work .
        Run on web browser it work.

        • Again, what do the logs say? Also, don’t test plugins in a browser.

  • Billy Nguyen

    Hi Raboy, that is a great tutorial, I have spending hours to find it on web, thank you very much !

    • No problem! Glad I was able to help you 🙂

  • Irshad Gauri

    Hi Nic,
    I am using ionic framework to build mobile apps.But I am not able to use ngCordova keyboard plugin to disable keyboard Accessory Bar.Can you please give some example to use keyboard plugin.

    • Please direct all tutorial requests to my Twitter account @nraboy. I try to keep blog comments on topic with the post.

      Regards,

  • Brian Nyagol

    Hello Nic, I a trying to use the ‘_self’ option to open a link within the web view. However, I cannot navigate the app further unless I kill it first and start again. Is there a way to open this link within the web view but under the title bar so that I am able to navigate the application?

    I know I can use the ‘_blank’ option, but I would like users to be able to upload photos on that page, which does not work in the ‘_blank’ option due to Android limitations. It seemed to work on the ‘_self ‘ options in some phones.

    • I don’t think I’d do it like that. The InAppBrowser is just a web browser and probably shouldn’t be used like a screen in your application. If you’re having permission issues, maybe try using _system.

      You might check out the Cordova FileTransfer plugin for uploading files to a web page. It would certainly provide a more fluid user experience.

      Regards,

  • Any thoughts on trying to call a native app? Say I have an address and I want to send it to the Maps app…

    • Many apps have their own custom URI scheme so yes this is very possible. I just don’t know the parameters for your particular request. You’d have to consult the Google documentation for Maps.

      Regards,

    • Gene

      Tested, this may help

      window.open(‘geo:’ + latitude + ‘,’ + longitude + ‘?z=11&q=’ + latitude + ‘,’ + longitude + ‘(Treasure)’, ‘_system’, ‘location=yes’);

  • Archit Verma

    Hi Nic, Thanks a lot for this blog! It is really helpful.

    Following the documentation of InAppBrowser(http://cordova.apache.org/docs/en/3.0.0/cordova_inappbrowser_inappbrowser.md.html) I was trying to inject javascript in the web view to insert a header bar. But I am not able to do so. The console says exexuteScript() method isn’t defined. I’ve also put up a satck overflow question(http://stackoverflow.com/questions/29505050/how-do-i-inject-javascript-in-web-view-in-ionicandroid) for this. It would be great if you could help!

    • I’ve not used that command before, so unfortunately, I won’t be much help.

      Sorry,

  • Luis Rogelio

    Works like a charm! Thank you!

  • Carlos Wrangller Encarnacion R

    Thanks, it was helpful.

    • No problem! I’m glad you found it useful 🙂

  • landichokimpaolo

    Hi Nick, how can you close a window? Thanks 🙂

  • Cristhian Molina

    hello and to see an external image as would, Greetings

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

  • Nad_l

    hi Nic
    i am trying to open a new inappbrowser window with some initial data.
    i read a lot of ways to get the data back from the inappbrowser:

    http://blogs.telerik.com/appbuilder/posts/13-12-23/cross-window-communication-with-cordova's-inappbrowser

    but i cant find a way to send a simple string data
    (like picNumber) to my new inappbrowser window ?

    i tried to saving the data before opening the new window with :

    localStorage.setItem( ‘picNumber’, ‘5’ );”
    and then :

    win.executeScript(
    {
    code: “var pic = localStorage.getItem( ‘picNumber’ )”
    },but pic keep returning null ? and not ‘5’?

    any ideas how i can get the picNumber from within inappbrowser window ?

    • You would have to use the executeScript, but honestly I’m not too familiar with it or how compatible it is.

      Sorry 🙁

  • Corryn Brown

    Hello Nic, thanks for the tips here. I was able to code this into my ionic app and the links work. However, when pointing toward a site that has mobile capability the inappbrowser won’t get the mobile site but rather the full site- a little inconvenient when using this functionality on a phone. Any suggestions? Did I miss something you already posted? Thank you.

    • That is very odd!

      My guess would be that the InAppBrowser plugin isn’t providing the correct browser agent to say that it is mobile. You may want to open an issue ticket with the developers of the plugin and ask.

      Regards,

  • Luis Troya

    Did you use genymotion to run the emulator?

    • Yea, I use Genymotion because it is very quick 🙂

      • Luis Troya

        Interesting. I usually import my ionic project to android studio and run my project in the phone. I’ll give it a try

        Thanks for your reply.

  • David Victor Situma

    Awesome post there… question though, how does one implement web-view in ionic?

    • Can you give me an example of what you’re trying to do?

      • David Victor Situma

        Assuming in my nav bar i have a tab called google.When clicked I want it to load the google page within the app in the ion-content of the google tab, so that the tabs are still visible and the link for google is being displayed within the app.

        • I think the only way to do that would be to scrape the source code from this external HTML page and display it in your view with a ng-bind-html. This is something I don’t recommend doing as it will yield terrible performance for your users.

          Regards,

  • Amol

    Is there any way you can open the native Twitter/Facebook app with my username passed as a parameter? So for example, if a user clicked a twitter button, it would open up their native twitter application directly to my user page?

    Btw, your tutorials are great!

    • Your links would have to use the providers custom URI. For example, I think Twitter is:

      twitter://

      You’d have to look at their documentation on what can be passed as I’ve got no clue.

      Regards,

  • Elliot Alderton

    I have my URL’s coming from ng-repeat. Is there anyway to pass in the url to the onclick like. onclick=”window.open({{item.url}}, ‘_system’, ‘location=yes’); return false;” ?? Thanks.

  • WebMedia TV

    Hi Nic, is there any way to implement inappbrowser with loading spinner to alert the user for the loading status, i will appreciate with the code. thanks

    • I don’t think this is possible as there are no exposed methods for gauging progress for this plugin.

      Regards,

  • FX Bayu Anggara

    Thanks. Great articles. Helped me a lot.

    • No problem! I’m glad you found it useful 🙂

  • Hridaya Kandel

    is it possible to load the external url below the header bar in content??

    • I am honestly not sure. I can’t imagine why you would want to though. If you’re trying to embed content into your application you should do so via web apis and format the data yourself.

      • Hridaya Kandel

        i could open the external links and when i touch the app back button it doesnot return back to the app. the mobile back button doesnot works at all. i want the user to go back to the app if they click the back button

        • I wouldn’t use the mobile browser then. You need to find an API for the content you’re after, accept the JSON, and manipulate it yourself inside your application. When you have the data, you’re in control.

          Regards,

  • Savath Saypadith

    Hi, When i put my url like {{item.url}} to url , it’s not work. How to solve it?

    • “it does not work”

      What do you mean? You get an error? It crashes your computer? I need more information if you want help.

      Regards,

      • Nexo Nebro

        I have the same problem as Savath when trying to open a pdf file via url and I (we actually) have found a solution:

        <

        pre>SEE PDF

        <

        pre>

        Setting ng-href and then referencing it in window.open works for me.

        • Alan Feng

          Hi Nexo, how do you goto previous page (state) after clicking through?

          For Android might be fine because of the back button, for iOS, it seems impossible to go back?

          Thanks.

          • Roland

            Hey Nic, i also have the same problem as other guys here. i followed your tutorial but on IOS the web browser always overlays the app and is not starting on the system browser. No back button so that i can not switch back to the last screen. i tried ng-href, href, this.href; every possibility but it doesn`t changed anything. maybe i missed something? I installed the plugin and used your HTML File in a tab based app. Would be so great if you could provide me with an answer. Thanks in advance

          • Please post a screenshot to the comments.

          • Roland

            if i click on a link it looks like this

          • what if you do window.cordova.InAppBrowser.open instead of window.open. Of course making sure you use “_system” still.

            Also make sure you use the latest plugin version: cordova plugin add cordova-plugin-inappbrowser

            Best,

          • Roland

            it is completely the same. the website just overloads the app. i have also removed and reinstalled the plugin.

          • Roland

            i am using cordova version 5.4.1, ionic version 1.7.12 and following plugins:

            cordova-plugin-console 1.0.1 “Console”
            cordova-plugin-device 1.0.1 “Device”
            cordova-plugin-geolocation 2.0.0 “Geolocation”
            cordova-plugin-inappbrowser 1.1.1 “InAppBrowser”
            cordova-plugin-splashscreen 2.1.0 “Splashscreen”
            cordova-plugin-statusbar 2.0.0 “StatusBar”
            cordova-plugin-whitelist 1.0.0 “Whitelist”
            cordova-plugin-wkwebview-engine 1.0.1 “Cordova WKWebView Engine”
            ionic-plugin-keyboard 1.0.7 “Keyboard”

          • I don’t know then. You are a very isolated case. I use this plugin all the time and never ran into this problem.

            You may want to post your issue in the forums.

            Regards,

          • niteen bhende

            did u got solution for ios then…????

        • hva.narola

          remove {{ }} braces from ng-href then it will be able to get item.pdf

  • NorinEclypse

    Hello Nic, seems like you are pretty friendly with helping =) I’ve got the page loading, but I am trying to render a page that is intended for a desktop computer in a way that is more friendly for mobile devices. Any advice?

    • To my knowledge you’d either have to fix the webpage or live with it.

      Honestly you should limit your usage of the InAppBrowser. Loading external websites is more often very slow. Try to use APIs and manipulate JSON data yourself whenever possible.

      Regards,

  • Gorka G. L.

    Hi Nic!, when you close a window with ref.close(). From ‘chrome://inspect/#devices’ this windows is not closed 100%, it becomes another blank window (about:blank). How can you close this window (about:blank)? Thanks 🙂

    • I don’t use Chrome Inspector when testing. Could be a Chrome for Desktop issue. Do you get the same results when testing natively (build APK and install)?

      Regards,

      • Gorka G. L.

        Hello Nic!.
        Yes, I get the same results. 🙁

        Any idea?

        Thanks!

  • Saurabh AV

    Hi, nice article, however I have a different requirement, wherein I have a form in my HTML. Is there a way to specify an in-app browser instance as the target of the form?

    As in I want the form’s action to open in an in-app browser. When using “_blank”, my app is being disconnected from the webview.

    (http://stackoverflow.com/questions/32369827/how-to-change-a-forms-target-to-in-app-browser-in-ionic)

    Any help appreciated, thanks!

    • I don’t believe this is possible. In fact, why would you want to do something like this?

      Regards,

      • Saurabh AV

        I know this is not conventional, I need to something like this because of limitations of the third party payment gateway I have to integrate with.

        The only way I can access the payment gateway integration site is by a POST form submission. I am using iframes as a hack for this , however this seems dirty and insecure.

        Could you suggest any better alternative?

        Thanks

        • Post the form data via AngularJS $http.post?

          • Saurabh AV

            I have tried the http service, but the third party gateway needs the POST information through form action so that it redirects the client to another site.

            The only solution I could find was using Iframes, which feels dirty and insecure.

          • Whatever you’re trying to do, I wouldn’t advise it. You’re going to give your users a very poor experience which in turn is going to get you less money and a lower rating.

            InAppBrowser use in your mobile application should be minimal. Like for displaying third party websites for information purposes only.

          • Saurabh AV

            Thanks I shall jeep that in mind.

  • FUCKER

    FUCK YOU RUBBISH APP

  • Saber Ouni

    i have this file:///data/data/com.ionicframework.gtruckautovl711769/files/1_20150826142431.jpg it work good with _blank but when i put this files file:///data/data/com.ionicframework.gtruckautovl711769/files/1_18741544524.pdf i dont see the content of my pdf

    Thanks

    • Most devices don’t know how to read PDF files. When navigating to a PDF via the InAppBrowser it will probably download it instead.

      Regards,

      • Saber Ouni

        Any solution please?

        Thanks

        • There are no solutions this. You would have to design a PDF reader plugin if you want this functionality. I cannot help with this. Sorry,

          • Philip Chen

            Hello, from your reply, Can I use this download activity to check weather user has installed the PDF reader in the Mobile? Or do u have another suggestions for this checking, Thankx A lot.

          • This could work, but probably not well:

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

            You’d have to check for a particular PDF reader, when there could potentially be thousands.

            This is something you’d really have to design yourself.

            Sorry,

  • Works great! Thank you! 🙂

  • Shrinivas Kattimani

    Thank you Nic Raboy, for the nice tutorial. I wanted to know whether there is a way to get the current URL? If yes, how?

    • You can get the current URL via one of the listeners. I demonstrate that here:

      https://www.thepolyglotdeveloper.com/2014/07/using-oauth-2-0-service-ionicframework/

      Best,

      • Shrinivas Kattimani

        Thanks for the reply Nic. I was trying to use event handlers, but none of the combinations worked on the browser. Later, when deployed on the device, ‘_blank’ worked. Is it that the other two ( _system and _self ) will not trigger the events?

        • Well for one, you cannot use native device plugins in a web browser. They can only be tested via a device. And yes, you need to be using a variation of the Cordova browser if wish to inspect the URL. It would be a security risk if the device let you inspect a third party app such as the system browser.

          Best,

          • Shrinivas Kattimani

            Thank you Nic. I could successfully fetch the ‘code’ and ‘expire-time’ using ngCordovaOauth.

          • No problem!

      • Shrinivas Kattimani

        I want to implement Login with LinkedIn, using REST APIs.
        https://www.linkedin.com/uas/oauth2/authorization?response_type=code&client_id=MYAPPID&redirect_uri=http://www.SOMEDOMAIN.com&state=SOMEVALUE
        Upon clicking ‘Allow access’, linkedIn sends the ‘code’ along with the redirect URI, which opens in a NEW TAB. how do I get it’s URL?

  • Shrinivas Kattimani

    Hello Nic,
    I have a problem:
    I have used inAppBrowser for linkedIn and Facebook sharing in my app. Whenever I choose to share via them, in app browser opens, and I can’t come back to previous screen. The default android back button doesn’t work. All I have to do is, close the app and re navigate to the required screen. Any idea how can I close the window or navigate back? I tried history.back(), but no positive results.

    • I recommend you use the social sharing plugin rather than the InAppBrowser plugin.

  • arun

    Hi Nic,

    I have a problem, I get a text message in mobile device. In that message, i get one url. My problem statement is when i click the link in mobile, i need to launch or open the app in mobile. I am struggle in this task give some idea man….

    • I really have no idea what you’re talking about. This article is for opening URLs in the system browser. You’re wanting to open your Ionic app when someone sends you a text message with a particular link?

  • Ranjoy Sen

    Hey, the steps you said worked well in iOS.but in android ref.addEventListener(‘loadstart’, function(event) is not calling.Hence the browser is not closing. and idea what could be the issue.

  • Jamie Buttons Coulter

    Hi Nic, thanks for the tutorial. I am wanting to use an expression within my URL as it will change depending on the client. For example, window.open(‘http://{{clients_website_url}}’, ‘_system’, ‘location=yes’); Unfortunately onclick will not allow Interpolations for HTML DOM event attributes so i have to instead use an ng-click event. This for some reason gives me no error within the console but doesnt seem to launch the browser. Any ideas? Hope my question made sense, thanks. J

  • Stewiek K

    how to you open up a facebook link that allows the user to use their facebook app to open?

    • Are you wanting to open Facebook from your app or are you wanting to open your app from Facebook? If you clear that up I can probably better help you.

      Best,

      • Stewiek K

        thanks for the quick response and the wonderful article.
        i have a number of member’s profile and each of them have (website, fb page)
        so like twitter link will open up twitter app
        facebook link will open up facebook app.

        will it be possible?

  • devlopez

    Nice tutorial, may I use this to show a browser on a tab using ionic app?

    • No this opens a separate window in all scenarios.

  • Imran Cxt

    onclick=”window.open(‘{{x.link}}’, ‘_blank’, ‘location=yes’)” why it’s not working?and how can i solve it?

  • mik

    Thanks for all your simple and invaluable post.. I am creating ionic app which display page from other domain(i.e from web). I used iframe for this purpose. Problem is that there is a link of files that can be downloaded. The link of the files are dynamically generated within iframe. After putting a lot of effort I am still unable to download the files through my app. Pl help..

    • You’ll have no control in regards to what happens in an iFrame. I encourage you to not use them within your mobile application if you care about UX and performance.

      Best,

      • mik

        Thanks a lot for your quick response.

  • Che Carlitos

    Hi, how to add a parameter in URL? I need pass data from JSON (example: ID, or slug)

    • In this case you should probably create a function in your controller. Maybe something like this:

      Then in the button just do something like:

      Regards,

  • sufiyan khan

    Hey Nic,
    like always your article got me out of trouble.Thanks 🙂

    • No problem! Glad you found it useful 🙂

  • sufiyan khan

    Hi Nic,
    I implemented the in app browser in my app its working fine in android but its not displaying back/cancel button in ios.

  • 文壮 刘

    Thank u for this great post, and I found though I set ‘allow-navigation’ and ‘allow-intent’ attributes to wrong urls in ‘config.xml’, inappbrowser could open my urls. For example, in ‘config.xml’:

    and in my html:

    could you help resolve my doubt, looking forward for your replying.

    • I’m not entirely sure what you’re trying to tell me. Can you try again?

      • 文壮 刘

        Sorry for my poor description. And I wonder whether cordova-plugin-inappbrowser can ignore ‘allow-navigation’ and ‘allow-intent’ attributes or not. I’m looking forward to hearing from you.

        • I don’t believe those two configurations are related to the InAppBrowser.

  • Do you know how to refer to images in pages opened in this fashion? So if I do window.open(‘./folder/file.html’) and my file.html refers to then the image is not loaded even if it’s there, in the same folder/ as file.html.

    • Why are you using the InAppBrowser for local HTML files? If you have control of the local files you should create an actual Ionic route with them.

      • It’s because of time constraints: lots of static HTML files which we don’t have time to integrate into ionic’s template system. However I now see I was the victim of a corrupt jpeg – the images do display fine but note it’s case-sensitive (image.jpg != image.JPG).

        • Glad you got it working, but let me be honest with you. Wrapping a website in an Apache Cordova framework is going to leave you with a low quality app. Your App Store reviews are going to reflect.

          Best,

  • Issa Jad

    Hello Nic ,
    Thank you so much , my problem is i want to open the link inside my app i used ‘_self’ as mention and try ‘_blank’
    but all of this open in the phone browser how i can make it open inside the app pls help ?
    Regrds

    • In all scenarios it will open in a browser. What browser is dependent on what you use.

      Maybe I don’t understand what you’re asking?

  • Shash

    Hi nic.. I’am not able to open any external urls after building ionic build android…I tried all the templates like…_blank, _system, _self…its not opening either in browser, or in inapp….at a same time I can run the same projects external urls in the “IONIC VIEW “app….

    • First off, I don’t recommend you use Ionic View. Not when you’re using plugins at least.

      What happens when you use this instead:

      cordova.InAppBrowser.open

      Regards,

  • SAM KHAN

    Hi NIC RABOY, i went through your tutorial but i have problem similar like this but i am not able to solve please help me. my problem is that i have display person detail page where i am displaying the all detail of person like name, age, no, and address, now i want make a button on same page like location, on clicking location button i want to open google map or google to search the address of that person. hope you got the problem, please help me as soon as possible.
    thanks and regards

    • You’d have to take a look at the google Maps APIs and Google Search APIs to see what they expect.

      • SAM KHAN

        thanks budyy i got the solution.

      • SAM KHAN

        i have another problem bro.. i am developing an application for tourism and there is change location button, now i want to click on change location button and open it in popup and in popup there should be a toggle button in one div and in other div select option, when toggle is off then selection option div show and when toggle is on then select option div does not show, please try this problem at your side and then let me know bro..

        thanks and regards

        • Can you explain to me how it is relevant to launching external URLs?

  • juned

    can i open external URL like http://www.google.com within app? i dont want to reddirect it to google i want to open google.com within my app

    • No you should not do this. You should either consume API data and parse it into your application, or redirect to a website via the InAppBrowser.

      Best,

  • Juan Wilde

    Useful tutorial! Thanks man! 🙂

    • No problem. Thanks for the compliment!

  • Veysel Kaya

    <!–
    {{todo.marathonname}}
    –>

    this code working on Chrome but not working Android Phone and Genymotion..:)

  • Veysel Kaya

    this code working on Chrome but not working Android Phone and Genymotion..:)

  • Mahendra Rajdhami

    Thanks Nic for great post. It works fine. When external link opens, i want my app statusbar color, Is it possible to do that?

    • The InAppBrowser is an external browser. While you could inject CSS to it, you probably shouldn’t. It should be used for showing web pages, not embedding web pages within your app.

      Just my opinion.

  • Thomas Chen

    Hello Nic, thanks for sharing. I totally agree with on the native preference using ‘_system’. Personally I am using it to load social media pages.

    It opens and loads in the native app (If installed, else safari) of the target. I’ve tried in Facebook, Twitter, Youtube and Instagram.

    All of them worked fine except Instagram which opens up Safari (loaded with the correct page) instead of Instagram app. And yes, I do have Instagram installed.

    Any idea on this behaviour?

    $cordovaInAppBrowser.open(target_url, ‘_system’, options)
    .then(function (event) {
    // success
    })
    .catch(function (event) {
    // error
    });

    • If your Android or iOS platform version doesn’t have Instagram schemes baked into the OS, links will be treated as links. Without the scheme it won’t know that it should open via an app.

  • Hi, I’m Project managing the development of an app and my programmer used your tutorial to have a responsive webpage (URLs) in the app, so thank you for your work.

    Works perfectly in Android but with iOS it won’t show the responsive webpage, it shows the desktop version. Any ideas or thoughts on how to fix this?

    Thanks in advance

    • You should not try to display a website in your ionic app. That is essentially embedding a website in a website.

      If you care about your users you should either load it in the system or Cordova browser or find a REST API version and render the data yourself.

      • Sorry, didn’t explain myself properly and we are not displaying in the website, got it working now and have even used the same code in Ionic creator so thank you for posting this!!

  • Thanks a lot friend =D

  • Bilal Yaqoob

    i dont want onclick function, and i dont want to click on buttons,, all i want is that when i launch my app it automatically opens the link
    how is that possible plz help

    • Do you have a solution about this?

      • Bilal Yaqoob

        yes, I found it, its like this

        This will open Directly


        i put in in my side menu but i think if you want to load it after splash, you should put it inside contoller that start first in the application. i dont know im a real noob in ionic and im learning…

  • amar jyothi

    Hey, hi nic. I have a problem.
    I am using two plugins in my app
    1)in app browser plugin
    2)custom url scheme plugin
    Both are working fine. The thing is, I have an external php file over my server which i am opening it using inappbrowser(i am hiding the url by setting location=”no”). I sending the user to payment gateway, and that gateway is sending me the response. For that i have response page over server. finally when the response page is loaded i am trying to redirect the user to my app. I am unable to do it through response page.

    However, when i set location=”yes”, the page is opening in browser, user can see the url.finally on returning to response page and that page is opening my app.

    Please help!! I reckon i have explained the things correctly. hoping to see your reply

    • You might want to take a look at my ng-cordova-oauth plugin. In it I use InAppBrowser listeners where I close the browser after a certain URL is navigated to. Would that do what you want?

      • amar jyothi

        Thank you for your reply. It seems the ng-cordova-oauth plugin has facebook,google integrations. I am using a payment gateway called “atom”. I am sending the user to their gateway. After transaction , it is returning with response(I am getting some values in response. I have that response page in server). Now in that response page, how do i trigger so that my app opens(custom url scheme : mycoolapp://). In that response page on window load , i have written a line to fire mycoolapp://. All I am able to see this “mycoolapp:// web page is not found”.Here i am setting the location to “no”. If i set the location to yes, the payment gateway is opening in browser and i am able to see the url. finally it is coming to response page , and mycoolapp:// is getting fired and my app is opening. however, if i set the location to false, it isn’t working. Hope something makes sense!!! Looking forward for your reply. Thank you

      • amar jyothi

        I had a look at it. But i am little confused. Do you want me to replace this code:
        var browserRef = window.cordova.InAppBrowser.open(flowUrl, ‘_blank’, ‘location=no,clearsessioncache=yes,clearcache=yes’);
        browserRef.addEventListener(‘loadstart’, function(event) {
        if((event.url).indexOf(redirect_uri) === 0) {
        browserRef.removeEventListener(“exit”,function(event){});
        browserRef.close();
        var callbackResponse = (event.url).split(“#”)[1];
        var responseParameters = (callbackResponse).split(“&”);
        var parameterMap = [];
        for(var i = 0; i < responseParameters.length; i++) {
        parameterMap[responseParameters[i].split(“=”)[0]] = responseParameters[i].split(“=”)[1];
        }
        if(parameterMap.access_token !== undefined && parameterMap.access_token !== null) {
        deferred.resolve({ access_token: parameterMap.access_token, expires_in: parameterMap.expires_in });
        } else {
        if ((event.url).indexOf(“error_code=100”) !== 0) {
        deferred.reject(“Facebook returned error_code=100: Invalid permissions”);
        } else {
        deferred.reject(“Problem authenticating”);
        }
        }
        }
        });

        in place of : window.open(url, “_blank”,location=no);
        is that, what you mean??

        • I didn’t mean use the code, I meant look at what I’m doing to track what page the user is on.

  • Paresh Gami

    can you help me out in this? i am not able to open links in system browser from dynamic iframe. we cannot do anything in iframe it is third party. Please help

    • iFrames are sandboxed to prevent XSS. There is nothing that can be done to manipulate how they function

  • Mayur Kharat

    Thank you for this tutorial. But i have one question How can I open external URL on app launch directly??

  • Guna Sekhar

    Hi Nic, Can you please tell how to open camera/gallery using inAppBrowser. If I add camera permissions in Xcode it is working in iOS, but if i add permissions in manifest.xml it is not working in Android. Even i tried by installing camera plugin. please help me.

  • Vijaya Sree

    hi, the website url should not present while opening the website in the app using inappBrowser. it should work like iframe.

  • vishal thakur

    need url scheme for zoom cloud meeting in iOS to open zoom cloud meeting application

  • Deeptansh thakur

    hi #Nic sir ,

    I can’t use this plugin can you help me plz ??????

  • Deeptansh thakur

    Hi ,
    i can not install this plugin plz me .
    #Nic

  • Vageesan

    Hi Nic,

    In iOS, The inappbrowser is not opening after clicking any link. It opens only after clicking the status bar or after revisiting the app.

    The functionality is same both in emulator and iPhone 6

    Using cordova-plugin-inappbrowser 1.7.0 “InAppBrowser”

    Cordova CLI: 6.5.0
    Ionic CLI Version: 2.2.2
    Ionic App Lib Version: 2.2.1
    ios-deploy version: 1.9.1
    ios-sim version: 5.0.8
    OS: OS X El Capitan
    Node Version: v6.9.1
    Xcode version: Xcode 8.2.1 Build version 8C1002