Cordova ios with wkwebview plugin - window.open(url, "_system") doesn't work

Viewed 2540

I can't open links externally on system browser.

Cordova version 9.0.0 (cordova-lib@9.0.1)

Active plugins:

"cordova-ios": "^5.1.1",
"cordova-plugin-keyboard": "1.2.0",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-wkwebview-engine": "^1.2.1"

My noteworthy lines on config.xml

    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />

    <feature name="CDVWKWebViewEngine">
        <param name="ios-package" value="CDVWKWebViewEngine" />
    </feature>
    <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
    <preference name="KeyboardDisplayRequiresUserAction" value="false" />
    <preference name="BackupWebStorage" value="local"/>

I've tried with:

window.open(url, "_self")
window.open(url, "_blank")
window.open(url, "_system")

But the only function that works and returns something in console is the one with "_self" arg. I've tried with HTML tag:

<a href="http://url" target="_system">foo</a>

But it doesn't work as well.

Trying to find out the source of the problem, it's seems to me there is somewhere a bug on the implementation of the wkwebview plugin on the ios's WebKit WebView, maybe related with the recent changes apported by Apple to avoid the deploying of UIWebView-based apps and ios sdk <13 on the App Store

2 Answers

I spent a few hours trying to get this to work. I found a work-around for the issue with the @zestia/cordova-plugin-wkwebview-engine-windowopen plugin.

Add to your project using:

cordova plugins add @zestia/cordova-plugin-wkwebview-engine-windowopen

You can just use the last version of InAppBrowser (4.1.0 for now), and open the external link* using "cordova.InAppBrowser.open" instead of "window.open". Also, include the "hidden=yes", like this (it fixed some problems in iOS):

**cordova.InAppBrowser.open**('https://www.google.com/', '_system', '**hidden=yes**,location=yes');

*It works also with "mailto", "tel", "whatsapp"... for Android, you just have to allow the intent and give permissions in config.xml file, like this:

<access launch-external="yes" origin="tel:*" />
<access launch-external="yes" origin="mailto:*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />

Finally, if you want all page loads in your app to go through the InAppBrowser, you can simply hook "window.open" during initialization:

$ionicPlatform.ready(function () {
  if (ionic.Platform.isWebView()) {
    window.open = cordova.InAppBrowser.open;
  }
}
Related