Can't open mailto: / tel: / sms: links in IAB under iOS: URL not supported

[acran]

Bug Report

Problem

Opening links for mailto: / tel: / sms: protocols from a page in the in-app-browser does not work.

What is expected to happen?

Having a page with a link like

<a href="mailto:mail@example.net">send mail</a>

in the in-app-browser and clicking it should open the mail app with the compose view for the specified address.

Links to a tel: or sms: URI should open the dialer / SMS app respectively.

What does actually happen?

Clicking the links under iOS does nothing. In the console an error is logged: URL not supported

Information

• Opening the links does work with Android
• Opening such links from the Cordova WebView does work
• in the in-app-browser under iOS those URL do not work and an error is logged:
  • as links <a href="mailto:mail@example.net">send mail</a>
  • with window.open('mailto:mail@example.net')
  • with window.open('mailto:mail@example.net', '_blank')
  • with window.open('mailto:mail@example.net', '_system')
  • with window.location.href = 'mailto:mail@example.net'

Command or Code

I tested and verified this with a clean new and minimal Cordova app

• create new Cordova project
• add cordova-plugin-inappbrowser
• open a page with mailto: / tel: / sms: links in the in-app-browser
• try open such a link

You can find a sample app here: https://github.com/acran/cordova-inappbrowser-mailto-bug-sample

The config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloCordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

Environment, Platform, Device

Verified on iPhone 12 with iOS 14.

Version information

• cordova: 10.0.0
• cordova-plugin-inappbrowser: 4.1.0
• cordova-ios: 6.1.1
• Xcode: 12.1 (using Ionic Appflow)

Checklist

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

[fernandoghisi]

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 also works 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;
 }
}

[acran]

@fernandoghisi the issue here is actually about opening those links from within the InAppBrowser and not from the Cordova WebView, i.e. within the InAppBrowser cordova.InAppBrowser is not available and may also be displaying external web pages.

The scenario you're referring to is covered by #592 and #775; for them your solution is correct and I can confirm they work. But unfortunately not for this issue.

[jay34fr]

Hello @acran, did you find a solution please ?
I have the same issue.

Thx in advance.

[jay34fr]

You certainly find the solution.

If not :
#592 (comment)

[acran]

@jay34fr see my previous #830 (comment):

#592 is about opening those links from the Cordova WebView.
This issue on the other hand is about opening those links from within the InAppBrowser, i.e. the embedded browser window you can use to open arbitrary external URLs, see the linked sample app.

[hanifmhd]

Hi,
i tried to running tel: function in inAppbrowser, but it's not working, is there any solution?

var url = "https://blablabla";
var target = "_blank";
var options = "location=yes";
var inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);

function messageCallBack(params){
    if (params.data.type == "Call"){
        cordova.InAppBrowser.open('tel: 1234567890',  '_system', 'hidden=yes, location=yes');
    }
}

inAppBrowserRef.addEventListener('message', messageCallBack);

[dl9rdz]

I have the same issue on Android and using cordova-pluing-inappbrowser 4.1.0

I am using the InAppBrowser to view an external html file. This file contains a "geo:"-URL, an clicking on that URL yields the same problem. Logcat shows "E/InAppBrowser: Possible Uncaught/Unknown URI"

[eric-horodyski]

@jay34fr see my previous #830 (comment):

#592 is about opening those links from the Cordova WebView.
This issue on the other hand is about opening those links from within the InAppBrowser, i.e. the embedded browser window you can use to open arbitrary external URLs, see the linked sample app.

@acran - If I change the target to _self or _system I'm able to have the device prompt me to call and switch to the phone app. I've taken your project and set the URL to a local pizza place which has a vanilla tel link in their markup, for whatever reason your iab.html just didn't work for me.

Unfortunately, _blank doesn't work. Which is probably the most sought-after target to have work since it doesn't transition the user away from the app. But, hopefully this helps in the eventual fixing of the issue.

[saixin]

cordova.InAppBrowser.open('https://www.google.com/', '_system', 'hidden=yes,location=yes');
With option of target=_system, it will go out of the app and open device's browser, that's not cool.

[victorvhpg]

Any update?

[JensUweB]

I have a solution to this in our Angular 10 Capacitor App. This should work in vanilla cordova apps too.
Just using InAppBrowser.open(...) did not work for us at all, which is no surprise. InAppBrowser cannot handle action links properly, so why open it with InAppBrowser?

But hooking into beforeload and opening the links with window.open did work for us.

    const browser = this.iab.create(url, '_blank', this.options);

    browser.on('beforeload').subscribe((event) => {

      // Check if event url is an action link
      if (event.url.startsWith('tel:') || event.url.startsWith('mailto:')) {
        console.log('Found an action link! ' + event.url);
        window.open(event.url, '_system');
        return;
      }
      // more workarounds
      ...
      // Nothing from above applies. Continue loading
      console.log('Beforeload released. Continue loading ' + event.url);
      browser._loadAfterBeforeload(event.url);
    });

I hope this helps anyone!

[acran]

@JensUweB see my previous #830 (comment):

This issue is about opening such action links from within the InAppBrowser window where the InAppBrowser API is not available. Your code snippet will only work in the Cordova WebView. See related issues #592 and #775 which refer to issues within the Cordova WebView.

[davidrodma]

I have a solution to this in our Angular 10 Capacitor App. This should work in vanilla cordova apps too. Just using InAppBrowser.open(...) did not work for us at all, which is no surprise. InAppBrowser cannot handle action links properly, so why open it with InAppBrowser?

But hooking into beforeload and opening the links with window.open did work for us.

    const browser = this.iab.create(url, '_blank', this.options);

    browser.on('beforeload').subscribe((event) => {

      // Check if event url is an action link
      if (event.url.startsWith('tel:') || event.url.startsWith('mailto:')) {
        console.log('Found an action link! ' + event.url);
        window.open(event.url, '_system');
        return;
      }
      // more workarounds
      ...
      // Nothing from above applies. Continue loading
      console.log('Beforeload released. Continue loading ' + event.url);
      browser._loadAfterBeforeload(event.url);
    });

I hope this helps anyone!

Save JensUweB!!!
Thank You!
Just a note, beforeload parameter in options has it set to 'yes'

[Bernhard-Steindl]

Since this issue got quite a lot of attention and the last plugin release (tag 5.0.0.) was more than 2 years ago (Feb, 10, 2021), I wonder when there will be a new release of the plugin cordova-plugin-inappbrowser that contains the fix of this issue? @NiklasMerz
Thanks! Best regards.