cordova-ios: window.open() with _system does not work with wkwebview (on cordova-ios 6.0.0)

Bug Report

Problem

Safari does not open with wkwebview. With UIwebview, before the updates, it worked

window.open('https://google.com', "_self") - this opens a new page in inappbrowser (as expected) window.open('https://google.com', "_blank") - nothing window.open('https://google.com', "_system") - nothing I’ve tried also with <a href="https://google.com" target="_system">foo</a> but nothing happens

What is expected to happen?

Open the system browser

What does actually happen?

Nothing

Information

Command or Code

Noteworthy lines on config.xml

    <allow-navigation href="*" />
    <allow-intent href="*" />
    <access origin="*" />

Dependencies

  "dependencies": {
    "cordova-android": "^8.1.0",
    "cordova-ios": "^6.0.0",
    "cordova-plugin-androidx": "^2.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-browsertab": "0.2.0",
    "cordova-plugin-buildinfo": "4.0.0",
    "cordova-plugin-compat": "1.2.0",
    "cordova-plugin-customurlscheme": "5.0.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-firebase-messaging": "^4.0.2",
    "cordova-plugin-inappbrowser": "git+https://github.com/apache/cordova-plugin-inappbrowser.git",
    "cordova-support-android-plugin": "^1.0.2",
    "cordova-support-google-services": "^1.4.0",
    "cordova-universal-links-plugin-fix": "1.2.1"
  },
  "devDependencies": {
    "cordova-plugin-whitelist": "1"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-firebase-messaging": {
        "FIREBASE_ANALYTICS_VERSION": "17.2.+",
        "FIREBASE_MESSAGING_VERSION": "20.1.+",
        "ANDROIDX_CORE_VERSION": "1.0.+"
      },
      "cordova-plugin-device": {},
      "cordova-plugin-buildinfo": {},
      "cordova-universal-links-plugin": {},
      "cordova-plugin-browsertab": {},
      "cordova-plugin-customurlscheme": {
        "URL_SCHEME": "----------------"
      },
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "cordova-plugin-inappbrowser": {}
    },
    "platforms": [
      "ios",
      "android"
    ]
  }

Environment, Platform, Device

iOS 13.3 on Catalina simulator

Version information

cordova version: 9.0.0 (cordova-lib@9.0.1) cordova platform: cordova-ios 6.0.0 tested on: iOS 13.3 on Catalina simulator

Checklist

  • I searched for existing GitHub issues
  • I updated all Cordova tooling to most recent version
  • I included all the necessary information above

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 16 (1 by maintainers)

Most upvoted comments

I solved this using latest version of cordova-plugin-inappbrowser install the plugin and change window.open whit cordova.InAppBrowser.open this way , cordova.InAppBrowser.open('https://www.google.com', '_system', 'hidden=yes,location=no') and works perfect .

https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/

Ok, but… if window.open was removed, what we should use to do the same as window.open?

window.cordova.InAppBrowser.open() instead of window.open() From what I understand window.open was being overwritten in v<4 of cordova-plugin-inappbrowser

I found that using window.open() inside a synchronous click event handler works, but if the window.open() is called asynchronously (e.g. in an Angular rxjs observable), then it is blocked.

This blocking behavior can be tested when you attach the Safari devtools, and then try to run window.open() from the Console, it will also return null. However, if you attach a click event listener to any element from the Console, and call the same window.open() inside the handler, it will execute when clicking the element. This seems to be a Safari security feature.

Right. But mailto:email@email.com do not work with window.cordova.InAppBrowser.open()

for mailto you should use the window method

I found this line on a recent working project

 window.open(`mailto:${process.env.EMAIL}?subject=${t('Status report')}`, '_system', 'hidden=yes,location=no');

It opens the mail app, the hidden=yes,location=no should be a fix for iOS, but I’m not sure

it works with

  "cordova-android": "^8.1.0",
    "cordova-ios": "^6.0.0",
    "cordova-plugin-androidx": "^2.0.0",
    "cordova-plugin-androidx-adapter": "^1.1.1",
    "cordova-plugin-browsertab": "0.2.0",
    "cordova-plugin-buildinfo": "4.0.0",
    "cordova-plugin-compat": "1.2.0",
    "cordova-plugin-customurlscheme": "5.0.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-firebase-messaging": "^4.0.2",
    "cordova-plugin-inappbrowser": "^4.0.0",
    "cordova-support-android-plugin": "^1.0.2",
    "cordova-support-google-services": "^1.4.0",
    "cordova-universal-links-plugin-fix": "1.2.1"

config.xml

<allow-intent href="mailto:*" />

The window.open clobber was removed in the InAppBrowser v4 release, that’s why it’s a breaking change. More information can be found on our blog: https://cordova.apache.org/news/2020/06/13/plugins-release.html

What’s the up-to-date status of this in both Android and iOS?

Also: What if I call the InAppBrowser with a url of a page that calls window.open?

With Apple’s new WKWebView requirement, this just got sloppy. None of the whitelisting etc worked for me, nor could I use InAppBrowser.open or window.open with _system target. Somehow that caused my entire app to lose state and reset to pre-login. I ended up using this plugin and solved. Hope this helps someone else.

https://github.com/PaoloMessina/OpenUrlExt

@jonatarussi I use https://ionicframework.com/docs/native/email-composer this one for email, works nicely. For android only you need to override one import in provider.java if project is AndroidX enabled. you can find that in PR of that GitHub