cordova inappbrowser cannot open an external url on iOS

Question

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 onclick event of the window.open 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 1

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' };
    }

    handleExternalURLs();
}

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 });
            e.preventDefault();
        });
    }
    else if (device.platform.toUpperCase() === 'IOS') {
        $(document).on('click', 'a[href^="http"]', function (e) {
            var url = $(this).attr('href');
            window.open(url, '_system');
            e.preventDefault();
        });
    }
    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

Answer 2

After spending time in googling the web, I fixed the InAppBrowser open an external URL. Basically, There is bug in InAppBrowser plugin for ios platform. when you click the link, The Alert appears on iPhone. I fixed the bug by using the older version of InAppbrowser plugin. now it is working perfectly.

Answer 3

@Riccardo Go through phonegap documentation for this add your code snippet on, onDeviceReady and try it.InAppBrowser