Phonegap 2.9.0 doesn't open external links in default browser

Question

What I'm trying to do is super simple, open a link on the device browser, but it's showing to be harder than I had thought.

I create the project and add ios and android platforms with:

$ phonegap create project_name
$ phonegap build ios
$ phonegap build android

I have ; inside config.xml (tried different ways, none works) and "stay-in-webview" set to false.

The only changes I made in the www/index.html file was to add the links, the page is including all default scripts(phonegap.js, js/index.js and a call to app.initialize()).

I tried all these links, all opened inside the webview:

<a href="#" onclick="window.open('http://www.google.com', '_blank', 'location=yes');">_blank</a>
<a href="#" onclick="window.open('http://www.google.com', '_system', 'location=yes');">_system</a>
<a href="#" onclick="window.open('http://www.google.com', '_system');">_system</a>
<a href="http://www.google.com" target="_blank">target _blank</a>
<a href="http://www.google.com">no target</a>

Making clear that all the tests I made where done in the ios simulator and android emulator.

I've searched quite a lot, tried everything I found, but nothing works. Thanks for any help

Solution 1

To have links in a Cordova/PhoneGap App open in the default browser of the device, you have to make sure that window.open(<url>, '_system'); will be used to access it. For this to actually work -maybe a bit counter-intuitively- you need to enable the ‘InAppBrowser’ plug-in.

In Cordova version 2.9.0 the ‘InAppBrowser’ plug-in is built-in and you only have to make sure it is not commented out in Cordova’s config.xml. From version 3.0.0 on you will have to install the plug-in by running this command from your project directory:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

From the Cordova documentation on how ‘InAppBrowser’ uses the second argument target of window.open() in its overriden implementation:

target: The target in which to load the URL, an optional parameter that defaults to _self. (String)

• _self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
• _blank: Opens in the InAppBrowser.
• _system: Opens in the system's web browser.

In order to separate concerns and to prevent me from forgetting to add an onclick attribute to every <a/> that I want to open in the default browser, I like to dynamically attach that behaviour via JavaScript. Below is an example using jQuery in which the behaviour will also be re-attached after reloading the involved HTML via XHR. And it will only be attached to external links, thus also preventing attaching it to mailto: links.

$('#idContentwrapper').on('click', '.colofon-text a', function(event) {
    var href = $(this).attr('href');
    if (typeof href !== 'undefined' &&
        href.substr(0, 7) === 'http://')
    {
        event.preventDefault();
        // Open in default browser App (on desktop: open in new window/tab)
        window.open(this.href, '_system', 'location=no');
    }
});

Solution 2

I also encountered this problem.

Seems most answered are exactly opposite to the question, people usually answer how to open in inAppBrowser, I don't know why.

Just like you I tried various of methods but no one work. Finally I have to turn to native way. Fortunately, native way took my only around no more than 10 minutes that is much shorter than try people's phonegap answers.

In Android,

1. add the line in onCreate method to bind object to webpage's window object.

2. add a method on your binded object which accept a url string and behave open browser behavior.

   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
   
       super.appView.addJavascriptInterface(this, "nativeInterface");
   }
   
   public void openInDeviceBrowser(String url) {
       Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
       startActivity(i);
   }
   

In html

<a href="#" onclick="window.nativeInterface.openInDeviceBrowser('http://www.google.com/')">Google</a>

For iOS
1. add delegate to the MainViewController.h (in my project it's this name)

@interface MainViewController : CDVViewController<UIWebViewDelegate>  

2. set MainViewController as a webView's delegate, add below line in - (void)webViewDidFinishLoad:(UIWebView*)theWebView{ block

    theWebView.delegate = self;  

3. implement " - (BOOL)webView:shouldStartLoadWithRequest:navigationType:" method:

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType {
if(navigationType==UIWebViewNavigationTypeLinkClicked)
{
    NSURL* url = [request URL];
    if ([[url scheme] isEqualToString:@"http"]) {
        [[UIApplication sharedApplication] openURL:url];
        return NO;
    }
}
return YES;
}

Finally, change your html call like below:

<a href="http://www.google.com/" onclick="window.nativeInterface.openInDeviceBrowser('http://www.google.com/')" target="_blank">Google</a></li>

That's it. It easier than I thought and work for me. And I think this can prevent phonegap api change again in the future.

Hope this also useful to you.

Solution 3

I'm not sure whether this is still relevant, but to give my 5c: I just did some reconfiguration on my Cordova 3.3 (not PhoneGap Build) app, and ran into the same issue. You don't really need the plugin for that - make sure you link with:

<a href="#" onclick="window.open('http://www.google.com', '_system');">_system</a>

...as you posted AND important, in your project/xml/config.xml

<access origin="http://127.0.0.1*"/>

I have also the in-app browser disabled:

<!--
 <feature name="InAppBrowser">
  <param name="android-package" value="org.apache.cordova.InAppBrowser"/>
</feature>    
--> 

...now it works fine again ;)

Solution 4

Let answer,but may be it can help someone.

navigator.app.loadUrl('https://google.com/', { openExternal:true });

Cordova 3.3.1

View more solutions