PhoneGap InAppBrowser: open iOS Safari Browser

Question

In our PhoneGap iOS application, we are using the InAppBrowser plugin to display some content, and we need to open a page in Safari from within the InAppBrowser.

How can we have links from within the InAppBrowser open in Safari?

Answer 1

From the phonegap documentation:

Opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser.

var ref = window.open(url, target, options);

• ref: Reference to the InAppBrowser window. (InAppBrowser)
• url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.

• 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.

So to answer your question, use:

window.open(your_url, '_system', opts);

Note that the domain will need to be white-listed.

---

Update 4/25/2014:

I think I kind of misunderstood the question (thanks to commenter @peteorpeter) -- you want to have some way to click a link in the InAppBrowser and have that open in the system browser (e.g. Mobile Safari on iOS). This is possible, but it will require some forethought and cooperation between the app developer and the person responsible for the links on the page.

When you create an IAB instance, you get a reference to it back:

var ref = window.open('http://foo.com', '_blank', {...});

You can register a few event listeners on that reference:

ref.addEventListener('loadStart', function(event){ ... });

This particular event is fired every time the URL of the IAB changes (e.g. a link is clicked, the server returns a 302, etc...), and you can inspect the new URL.

To break out into the system browser, you need some sort of flag defined in the URL. You could do any number of things, but for this example let's assume there's a systemBrowser flag in the url:

.....html?foo=1&systemBrowser=true

You'll look for that flag in your event handler, and when found, kick out to the system browser:

ref.addEventListener('loadStart', function(event){
    if (event.url.indexOf('systemBrowser') > 0){
        window.open(event.url, '_system', null);
    }
});

Note that this is not the best method for detecting the flag in the url (could lead to false positives, possibly) and I'm pretty sure that PhoneGap whitelist rules will still apply.

Answer 2

Unfortunately target=_system does not work from within the InAppBrowser. (This would work if the link originated in the parent app, though.)

You could add an event listener to the IAB and sniff for a particular url pattern, as you mention in your comments, if that fit your use case.

iab.addEventListener('loadstart', function(event) {
   if (event.url.indexOf("openinSafari") != -1) { 
        window.open(event.url, '_system'); 
    } 
}

The 'event' here is not a real browser event - it is a construct of the IAB plugin - and doesn't support event.preventDefault(), so the IAB will also load the url (in addition to Safari). You might try to handle that event within the IAB, with something like:

iab.addEventListener('loadstop', function(event) {
   iab.executeScript('functionThatPreventsOpenInSafariLinksFromGoingAnywhere');  
}

...which I have not tested.