Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

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

Avatar

Level 2

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.

1 Accepted Solution

Avatar

Correct answer by
Employee

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.

View solution in original post

10 Replies

Avatar

Employee

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>

Avatar

Level 2

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>

Avatar

Employee

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?

Avatar

Level 2

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

Avatar

Employee

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.

Avatar

Level 2

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?

Avatar

Employee

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?

Avatar

Correct answer by
Employee

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.

Avatar

Level 2

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.

Avatar

Level 1

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.