External links in phonegap app do not open well

Question

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 de

Answer 1

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});

Answer 2

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

Answer 3

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.

• Latest whitelist plugin
• Phonegap Whitelist Guide
• Phonegap Build Whitelist Guide

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

Answer 4

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.

Answer 5

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.