"mailto:" and "tel:" links do not work in InAppBrowser (Android only)

andrei_k

13-09-2017

I am using Banners to link to web content that contain mailto: and tel: links. On iOS, these links work as they should. However, Android displays an error: "Web page not available net::ERR_UNKNOWN_URL_SCHEME". When the same page is opened using the default Device Browser, the links work fine.

I tried to modify the config.xml in the root by adding <access origin="mailto:*" launch-external="true" /> and <access origin="tel:*" launch-external="true" />. I rebuilt the app using a custom shell with the modified config.xml and appropriate plugins. However, this didn't resolve the problem.

I am wondering if anyone has a come across a solution or workaround for this problem.

Accepted Solutions (1)

Accepted Solutions (1)

Bruce_Lefebvre

Employee

15-09-2017

OK, after a bit of digging I've got a workaround that supports both iOS and Android. This is the body of my .article HTML page:

    <div class="app">

            <h1><a href="javascript:void(0)" onclick="openLinkInBrowser('http://brucelefebvre.com/sandbox/mailto-issue/')">Open page with a mailto:</a></h1>

        </div>

        <script type="text/javascript">

            function openLinkInBrowser(url) {

                if (navigator && navigator.app && navigator.app.loadUrl) {

                    navigator.app.loadUrl(url, { openExternal:true });

                }

                else {

                    window.open(url, '_system');

                }

            }

        </script>

        <script type="text/javascript" src="cordova.js"></script>

... the navigator.app.loadUrl(..) call was the key missing piece. Answer was found on this SO thread: html5 - phonegap open link in browser - Stack Overflow

Let me know if this works for you.

Answers (9)

Answers (9)

creigelde

03-12-2019

There's a long-standing bug in Chromium regarding how links without protocols are handled. This error does not have a single solution till date because it arises due to a multitude of reasons. The ERR_UNKNOWN_URL_SCHEME error is commonly because of your browser issue . There's no application on your device which can handle that particular action. It is a Chromium bug . In Chrome version 40 and up, this bug has resurfaced, but only if you are manually entering the URL of the redirect page in the address bar. The bug in chromium is responsible, yet everytime a patch is added to solve, the error finds a new way to resurface. The issue is on the chromium issue tracker here.

Common solutions:

  • Prefixing your links with http:// (or https://) should resolve the issue in some cases

  • If Err_Unknown_Url_Scheme error occurs in mailto: or tel: links inside an iframe then you can try to add target="_blank" in your URL Scheme.

andrei_k

07-12-2017

Hi Bruce, I meant to write you earlier...

Adobe have fixed the "mailto:" issue with Hot Fix 2017.11.1 (November 9). I still have an open ticket regarding the "tel:" links, but believe this is similar and will be resolved soon.

Thanks for your tips. Your last comment actually helped me with another task.

Bruce_Lefebvre

Employee

15-09-2017

Thanks for the update. I am able to reproduce this issue now, by opening a page with a mailto: link in the inappbrowser. Will file an issue and let the team know.

As a temporary workaround, can you use the device browser to open this page?

andrei_k

14-09-2017

Hi Bruce, I have a feeling you are using a .article file to test this. mailto: and tel: links work well for me in Articles. However, in my particular case, I am linking out to an external webpage. I have a Banner that "links" to an "http://" address. When this page is opened with a DeviceBrowser, (such as Chrome), it works fine. However, when this page is opened inside the app, (using AEM InAppBrowser), I get the error.

Would you have a chance to upload this code to a server and test using a Banner?

Bruce_Lefebvre

Employee

14-09-2017

My code is similar, but I have a script include for cordova.js at the end of the page's <body>:

<script type="text/javascript" src="cordova.js"></script>

Can you try again with this script added? Also, please make sure you have "extensibility features" enabled for this article.

andrei_k

14-09-2017

Hi Bruce, so weird... it still doesn't work for me. I tested on several Android devices with AEM Preflight and APK installs. I am testing with the following code that is linked by a Banner in the app:

<!DOCTYPE html>

<head>

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    <meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:*">

    <title>Link test</title>

</head>

<body>

    <p><a href="mailto:email@domain.com" target="_blank">Mail Link</a></p>

</body>

</html>

Is your code similar?

I keep getting the same error message, screenshot attached.

Screenshot_20170914-165533.png

Bruce_Lefebvre

Employee

13-09-2017

I tried this out on a couple of Android devices (old and new hardware) and was able to get your "Mail Link 1" working in an article viewed from the AEM Preflight app, with the following Content Security Policy set:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' mailto:*">

When the "Mail Link 1" link is tapped, the Gmail app opens as expected. On another device where two mail clients were found, a shade was opened allowing the user to select which mail app to use.

Are you experiencing this issue using the Preflight app, or taking another approach?

andrei_k

13-09-2017

Hi Bruce, thanks for your reply. Unfortunately, I tried something similar, but always got the same error. The HTML code I tested with so far:

<a href="mailto:email@domain.com" target="_blank">Mail Link 1</a>

<a href="#" onclick="window.open('mailto:email@domain.com'); return false;">Mail Link 2</a>

<a href="javascript:void(0)" onclick="window.open('mailto:email@domain.com', '_system');">Mail Link 3</a>

Bruce_Lefebvre

Employee

13-09-2017

Can you share the HTML code of your links?

Digging around, it looks like folks have had success with the following style:

<a href="javascript:void(0)" onclick="window.open('mailto:example@example.com', '_system');">Send us mail</a>