How do I gracefully interrupt loading of a certain URL in Cordova's InAppBrowser and open it in the system browser?
So I ended up with the following code:
openWithSystemBrowser = function(url) {
window.open(url, "_system");
location.href = "index.html";
};
shareOnWhatsapp = function(url) {
openWithSystemBrowser(url);
};
/**
* Handles URL changes in in-app browser, e.g. to handle logouts or
* unsuccessful logins
*/
urlChanged = function(event) {
if(event.url.startsWith("http://whatsapp://")) {
shareOnWhatsapp(event.url.substr("http://".length));
return;
}
if(event.url.startsWith("whatsapp://")) {
shareOnWhatsapp(event.url);
return;
}
};
This is of course slightly lame as you're always brought back to index.html, but for my purposes it was enough. Interested to see if anyone's found a more elegant solution.
It also solved the 2-3 second delay before opening the system browser, but I don't have any clue why, frankly.
I found an approach with a better user experience: When loading an external URL in the system browser, I close the InAppBrowser and reopen it with the last internal URL.
var appUrl = 'https://www.my-website.com';
var app = {
currentUrl: appUrl,
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
},
onDeviceReady: function() {
app.openBrowser();
},
openBrowser: function() {
var target = '_blank';
var options = [
"location=no",
"clearcache=no",
"clearsessioncache=no",
"footer=no",
"hardwareback=no",
"hideurlbar=yes",
"zoom=no",
"hidenavigationbuttons=no",
"toolbar=yes",
"hidespinner=yes",
"toolbarcolor=#000000",
"toolbartranslucent=no",
"navigationbuttoncolor=#ffffff",
"closebuttoncolor=#000000",
"closebuttoncaption="
];
browser = cordova.InAppBrowser.open(app.currentUrl, target, options.join());
// reopen the browser if it was closed via "Done" button
browser.addEventListener('exit', function(){ app.openBrowser(); } );
// open external urls in system browser window
browser.addEventListener('loadstart', function(event){ app.handleUrl(event.url, browser); });
},
handleUrl: function(url, browser) {
var extension = url.split('.').pop();
// load internal urls that are not pdf files in the app browser
if (extension != 'pdf' && url.startsWith(appUrl)) {
app.currentUrl = url;
return;
}
// open website in system browser window
var ref = cordova.InAppBrowser.open(url, '_system', 'location=no');
// since the inapp browser is loading the website too, close it and open it again with the last internal url visited
browser.close();
app.openBrowser();
return;
}
};
app.initialize();