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

Avatar

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile
andrei_k
Level 2

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)

Avatar

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile
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)

Avatar

Avatar
Boost 1
Level 1
creigelde
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 1
creigelde
Level 1

Like

1 like

Total Posts

2 posts

Correct reply

0 solutions
Top badges earned
Boost 1
View profile
creigelde
Level 1

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.

Avatar

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile
andrei_k
Level 2

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.

Avatar

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile
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?

Avatar

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile
andrei_k
Level 2

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?

Avatar

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile
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.

Avatar

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile
andrei_k
Level 2

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

Avatar

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile
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?

Avatar

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile

Avatar
Validate 1
Level 2
andrei_k
Level 2

Likes

4 likes

Total Posts

15 posts

Correct reply

2 solutions
Top badges earned
Validate 1
Give Back 3
Give Back
Ignite 1
Boost 3
View profile
andrei_k
Level 2

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>

Avatar

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile

Avatar
Give Back
Employee
Bruce_Lefebvre
Employee

Likes

28 likes

Total Posts

62 posts

Correct reply

28 solutions
Top badges earned
Give Back
Boost 5
Boost 3
Boost 25
Boost 10
View profile
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>