13

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"
Miguel Bocquier
  • 2,449
  • 5
  • 22
  • 38
  • Check my 2015 answer here: http://stackoverflow.com/questions/32208609/cordova-why-would-inappbrowser-plugin-be-required-to-open-links-in-system-brows/32227524 – Sebastien Lorber Aug 26 '15 at 13:26

5 Answers5

19

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.

Dom
  • 2,569
  • 1
  • 18
  • 28
  • 1
    Bravo!! That's exactly what I figured out last night :D The point 1 was my biggest problem `code``code`. I find my way out by installing the Phonegap CLI environment and so after building locally with helloworld project and debugging through xcode, I saw what I was missing. Thank you anyway for you answer it will help many people Im sure :D – Miguel Bocquier Sep 09 '13 at 13:48
  • Also to close this problem I warn everybody when you look at phonegap documentation take care to select the last phonegap version (min 2.9.0) at top right because a lot of changes occured and are deprecated. When I arrived into this doc through google I did not see my mistake for a very long time and was completely tricked!... – Miguel Bocquier Sep 09 '13 at 13:51
  • 2
    I followed all steps but unable to resolve this issue..:( In my case i am opening links on button click event – User16119012 Sep 28 '13 at 11:25
  • 1
    Would this work on links inside an iframe? I am serving ads that need to open in a new window, and unfortunately have no choice but to have them in an iframe. – Mike Feb 19 '14 at 02:17
10

There are 2 different ways to open URL in Android and iOS.

FOR IOS use following code: window.open("http://google.com", '_system');

and for Android use following code: navigator.app.loadUrl("http://google.com", {openExternal : true});

Jabel Márquez
  • 772
  • 1
  • 11
  • 38
Hassan Siddique
  • 1,590
  • 14
  • 27
  • I don't know why window.open wasn't working with the inappbrowser cordova plugin, but navigator.app.loadUrl did the job. Thanks! – Adan Archila Nov 14 '14 at 04:59
3

Dom's answer works for using PhoneGap 2.9.0

HOWEVER, like he said it is very important to follow step #1. I am using https://build.phonegap.com to compile my application and I used <script type="text/javascript" charset="utf-8" src="cordova.js"></script> to get this to work in place of step #1

If all else fails, try this example. It was written by one of the phone gap employees:

https://github.com/amirudin/pgb-inAppBrowser

Dessertdesert
  • 41
  • 2
1

IF External links do not open, READ ON.

UPDATE: 2016-03-20 I've create a tutorial on this subject.

Tutorial: Phonegap Build external webpage in iframe with whitelist example

If you are reading this you may notice that this Post refers to 2.9.0 for Cordova/Phonegap/Phonegap Build. 2.x is officially deprecated and no longer supported.

If you are using 2.X and you want to continue developing your App, upgrade.

If you are compile with 3.x, 4.x or 5.x or better, read on.

If you googled something like External links do not open, then here is what you should know. In Sept & Oct of 2015, Cordova and Phonegap made some major changes. These changes put into effect white-listing

White-listing means you *MUST* provide the system with a white list of the external links you plan on using. The entire system can be confusing. I am currently working on a blog post, but until then here is what you need to know.

The white-list system has three (3) parts

  • The white list provide in your config.xml
  • The white list plugin which you add to your config.xml
  • CSP (Content Security Policy) which is place on every webpage (only once, if you do SPA)

The application is not straight forward. If you are using version 3.x, then you do NOT need any of this. If you are using 4.x or better, this applies to you. If you are using 5.x, there even more rules that apply. Like I said, I'm working on a blog post, but this white-list thing is so onerous, I need to get the word out.

Here are the links you need to get started.

There is more explanation here:
Timeout AJAX Requests Cordova 5

In addition, you can read #10 of Top Mistakes by Developers new to Cordova/Phonegap

If you are brave, you can read my *RAW* notes at Cordova/Phonegap the white-list system

Community
  • 1
  • 1
0

window.open doesn't seem to work from callback methods. (Maybe this is a browser restriction?) That may not be the OP's problem but I hope that knowledge helps somebody.

Keith
  • 20,636
  • 11
  • 84
  • 125