Tel or mailto links not working on WKWebview

[jay34fr]

Bug Report

Problem

http(s) links are working, not tel: or mailto: with WKwebview. It's working with UIwebview

What does actually happen?

Nothing. Message in Xcode : "Failed to load webpage with error: unsupported URL"

I found several discussion but I don't know how to implement them on Cordova. https://stackoverflow.com/questions/33643326/catch-and-call-telephone-number-in-wkwebview https://stackoverflow.com/questions/44835703/why-is-wkwebview-not-opening-a-telephone-link-in-ios-9 https://stackoverflow.com/questions/51460119/how-can-i-tap-a-phone-number-with-wkwebview

Thx in advance. Jay

[BradCB]

I could not get Tel or Mail to work in the simulator and I wasn't seeing any errors in Xcode. Both are working on a physical device though (iPhone 6. iOS 12.4.5).

[jay34fr]

Thanks BradCB. Not working from my side on the device too, iPhone 11, iOS 13

[JamalAPI]

Could you show your the code that is not working?

[Vito96]

Any news about this?

[jay34fr]

I didn't find any solution yet...

[jay34fr]

@Vito96 : I put these functions in my app.js and it's working now

`// URL link with InAppBrowser Plugin $(document).on('click', 'a[href^=http], a[href^=https]', function(e){

        e.preventDefault();
        var $this = $(this); 
        var target = $this.data('inAppBrowser') || '_blank';

        if(device.platform == "Android" && $this.attr('href').split('.').pop() == 'pdf') { // Fix PDF Android
            window.open('https://docs.google.com/viewer?url='+$this.attr('href'), target);
        } else {
            window.open($this.attr('href'), target, 'location=no,closebuttoncaption=< Fermer,toolbarposition=top,presentationstyle=fullscreen,transitionstyle=crossdissolve, usewkwebview=yes,toolbarcolor=#666db0,closebuttoncolor=#ffffff');
        }

    });

            //  MAILTO & TEL in InAppBrowser Plugin
    $(document).on('click', 'a[href^=mailto], a[href^=tel]', function(eb){

        eb.preventDefault();
        var $this = $(this); 
        var target = $this.data('inAppBrowser') || '_system';

        if(device.platform == "Android" && $this.attr('href').split('.').pop() == 'pdf') { // Fix PDF Android
            window.open('https://docs.google.com/viewer?url='+$this.attr('href'), target);
        } else {
            window.open($this.attr('href'), target );
        }

    });`

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

[jwasnoggin]

Adding this was sufficient for me to get tel: links working:

document.addEventListener("deviceready", function () {
    if (device.platform == 'iOS') {
        $(document).on('click', 'a[href^=mailto], a[href^=tel]', function (e) {
            e.preventDefault();
            var href = $(this).attr('href').replaceAll(' ', ''); // It doesn't like spaces in the phone number
            cordova.InAppBrowser.open(href, '_system');
        });
    }
}, false);

[Netpolice]

Install the latest inappbrowser plugin, and using the following code: window.cordova.InAppBrowser.open('tel:xxxxxxx','_system');

[hanifmhd]

window.cordova.InAppBrowser.open('tel:xxxxxxx','_system');

Hi @Netpolice i already implemented it but it's still not working , probably you have another solution that calling tel: in InAppBrowser

[victorvhpg]

Any update?

[myarth]

Adding this was sufficient for me to get tel: links working:

document.addEventListener("deviceready", function () {
    if (device.platform == 'iOS') {
        $(document).on('click', 'a[href^=mailto], a[href^=tel]', function (e) {
            e.preventDefault();
            var href = $(this).attr('href').replaceAll(' ', ''); // It doesn't like spaces in the phone number
            cordova.InAppBrowser.open(href, '_system');
        });
    }
}, false);

encodeURIComponent($(this).attr('href'))

[jcesarmobile]

We are archiving this repository following Apache Cordova's Deprecation Policy. We will not continue to work on this repository. Therefore all issues and pull requests are being closed. Thanks for your contribution.