Riccardo Riccardo - 1 year ago 250
iOS Question

cordova inappbrowser cannot open an external url on iOS

I'm developing an hybrid app in phonegap and basically I have a button in the index page which whenever is clicked opens up an external url. I succeed on Android and fail on iOS.

I've looked up these questions iOS / Cordova: InAppBrowser not working - cordova/phonegap onclick doesn't work - PhoneGap Build: how to open external url in device browser on Android? - phonegap open link in browser but unfortunately none of these questions helped me to fix the issue.

First hypothesis could be an error message alert : The error message
on the iPhone where I'm testing my app is:
[ERROR] Error initializing
Cordova: Missing Command Error

Second hypothesis I'm doing something wrong with the
event of the

method because when I click the open button on the iOS test device nothing happens.

Here is the code:

document.getElementById("openBrowser").addEventListener("click", function(){
var ref = window.open('http://www.espn.com', '_self', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert('start: ' + event.url); });
ref.addEventListener('loadstop', function(event) { alert('stop: ' + event.url); });
ref.addEventListener('loaderror', function(event) { alert('error: ' + event.message); });
ref.addEventListener('exit', function(event) { alert(event.type); });

<button id="openBrowser">APRI</button>

As you can see the above piece of code works and works on the google ripple emulator too and as I said earlier at the beginning of my question it works also on Android (link to the android web app https://play.google.com/store/apps/details?id=com.phonegap.unoxtutti&hl=it)
As a matter of fact I'm not sure what problem may be behind this malfunctioning either the former or the latter hypothesis.

Besides the cordova plugin inappbrowser is in config.xml

<plugin name="org.apache.cordova.inappbrowser" />

I'm really unable to find the bug but I hope to have provided you the necessary information to help me to fix this seemingly insolvable problem

The test environmemts are Google Ripple Emulator, Phonegap Desktop App and the Phonegap Mobile App. The desktop app creates the directory of the project while the mobile app and the google ripple emulator are connected to the desktop app and are my test environments. Last but not least on the ripple emulator the external url successfully opens up while it doesn't on the mobile app and the
initialization error
throws when the app is opened.

Answer Source

After very long time spent in googling the web I made InAppBrowser open an external url. this is the SO answer who solved my bug

and this is the code of the answer in the link

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {

    // Mock device.platform property if not available
    if (!window.device) {
        window.device = { platform: 'Browser' };


function handleExternalURLs() {
    // Handle click events for all external URLs
    if (device.platform.toUpperCase() === 'ANDROID') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            navigator.app.loadUrl(url, { openExternal: true });
    else if (device.platform.toUpperCase() === 'IOS') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            window.open(url, '_system');
    else {
        // Leave standard behaviour
<a href="http://stackoverflow.com">

Basically all I'm doing in the above snippet is to check whether the device is iOS or Android and depending on the device in use I use a different method. This works on iOS Android and in a browser. I really hope this answer will help as many people as possible.

Device Plugin and InAppBrowser Plugin are required else this code fails

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download