PhoneGap InAppBrowser: open Safari iOS browser

Question

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

How can we have links from InAppBrowser in Safari?

Answer 1

From the phone records documentation :

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

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

• ref: Link to the InAppBrowser window. (InAppBrowser)
• url: URL to download (String). Call encodeURI () if the URL contains Unicode characters.

• target: The target of loading the URL, an optional parameter, which is _self by default. (Line)

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

To answer your question, use:

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

Please note that the domain must be white.

---

Update 04/24/2014:

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

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

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

You can register several event listeners at this link:

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

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

To break into the system browser, you need some kind of flag defined in the url. You can do any number of things, but for this example, let's say the systemBrowser flag is in the URL:

..... HTML Foo = 1 &? SystemBrowser = true

You will look for this flag in the event handler, and when you find it, go to the system browser:

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

Please note that this is not the best method for detecting a flag in the URL (maybe this could lead to false positives), and I'm sure that PhoneGap whitelisting rules will still apply.

Answer 2

Unfortunately, target=_system does not work from InAppBrowser. (This will work if the link originated in the parent application.)

You can add an event listener to the IAB and sniff for a specific url template, as you mentioned in your comments, if that matches 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 an IAB plugin design and does not support event.preventDefault() , so IAB will also load the URL (in addition to Safari). You can try to handle this event inside the IAB, with something like:

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

... which I have not tested.

Answer 3

This post is for clarification:

If you open another using window.open by catching a link to loadstart, it will kill the yor event handlers assigned by the first IAB.

For instance,

 iab = window.open('http://example.com', '_blank', 'location=no,hardwareback=yes,toolbar=no'); iab.addEventListener('loadstop', function(event) {console.log('stop: ' + event.url);}); iab.addEventListener('loaderror', function(event) { console.log('loaderror: ' + event.message); }); iab.addEventListener('loadstart', function(event) { if (event.url.indexOf("twitter") != -1){ var ref2 = window.open(event.url, '_system', null); } }); 

When the second window.open file is executed, it will kill all event listeners that you linked earlier. In addition, the loadstop event will not be fired after window.open is executed.

I find another way to avoid, but nothing was found.

Answer 4

window.open() does not work for me from InAppBrowser, regardless of whether I am adding a script link to cordova.js to get window.open(...'_system') support, so I came up with the following solution that tunnels' external "The URL is back to the IAB host through a hashtag so that it can be opened there.

Inside an InAppBrowser instance (I use AngularJS, but you can replace angular.element with jQuery or $ if you use jQuery):

 angular.element(document).find('a').on('click', function(e) { var targetUrl = angular.element(this).attr('href'); if(targetUrl.indexOf('http') === 0) { e.preventDefault(); window.open('#' + targetUrl); } }); 

Note that native window.open higher, not cordova.js window.open . In addition, the handler code assumes that all URLs starting with http must be loaded externally. You can change the filter as you wish so that some URLs load in IAB and others in Safari.

Then in the code of the parent who created InAppBrowser:

 inAppBrowser.addEventListener('loadstart', function(e) { if(e.url.indexOf('#') > 0) { var tunneledUrl = e.url.substring(e.url.indexOf('#') + 1); window.open(tunneledUrl, '_system', null); } }); 

With this solution, the IAB stays on the original page and does not launch the back navigation arrow to display, and the loadstart handler can open the requested URL in Safari.