Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

andrei_k
Level 2
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
Bruce_Lefebvre
Correct answer by
Employee
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
Bruce_Lefebvre
Employee
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>

andrei_k
Level 2
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>

Bruce_Lefebvre
Employee
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?

andrei_k
Level 2
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

Bruce_Lefebvre
Employee
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.

andrei_k
Level 2
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?

Bruce_Lefebvre
Employee
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?

Bruce_Lefebvre
Correct answer by
Employee
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

andrei_k
Level 2
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.

creigelde
Level 1
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.