External links in phonegap app do not open well

migswd picture migswd · Sep 7, 2013 · Viewed 28.3k times · Source

So I have a phonegap project with Phonegap 2.9.0 and building with PhonegapBuild.
I got external links in my app, that I would like to open inapp or using the default device browser outside of my app. I am ok for both solutions. Today my app open links inapp but it goes fullscreen, no zoom possible, and no button to come back in the app...
I am trying to figure out a solution for days, and looking at the same kind of questions here but nothing work good.

Could somebody explain clearly what is all this stuff about, and what are the different choices/params because I can tell that it is not clear/easy at all!

Q1 :
I would start by asking : in the file config.xml the preference stay-in-webview is deprecated now for phonegap 2.3.0 right? So nothing to hope here?

Q2 : I read and try a lot about the plugin InAppBrowser with window.open and target system / blank / self but no differences for me. I stay InApp but useless because no navigation buttons.
Am I missing something here?

plugin name="InAppBrowser" value="CDVInAppBrowser"

Answer

Dom picture Dom · Sep 9, 2013

I would start by asking : in the file config.xml the preference stay-in-webview is deprecated now for phonegap 2.3.0 right? So nothing to hope here?

That's correct. Dont even worry about this setting if you are using 2.9

I read and try a lot about the plugin InAppBrowser with window.open and target system / blank / self but no differences for me. I stay InApp but useless because no navigation buttons. Am I missing something here?

I had a few issues getting this to work as well. Their documentation is a bit scattered and need to read it all. Here is how I get it working:

  1. Ensure you have <script src="phonegap.js"></script> in each of your pages that wants to use the inappbrowser
  2. You should NOT need to include a plug-in tag in your config.xml. I am pretty sure that around 2.5 they included inappbrowser in the core build functionality.
  3. To open a link in the inappbrowser, use this javascript:

    function openURL(urlString){
        myURL = encodeURI(urlString);
        window.open(myURL, '_blank');
    }
    

    This will open the passed URL in the inappbrowser. If you change window.open(myURL, '_blank'); to window.open(myURL, '_system'); it will open the passed URL in the system browser.

  4. Finally, your item clicks look like this:

    <a href='#' onclick='openURL("http://www.urlyouwant")/>
    

    Or you could attach event listiners to the object, but I think you get the point.

Additionally, the InAppBrowser has a lot of event listeners you can attach to it. Take a look at the documentation if you are interested in those.

Important!!!! Do not forget step 1!

Hope this helps.