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

Avatar

Avatar

andrei_k

Avatar

andrei_k

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.

View Entire Topic

Avatar

Avatar

Bruce_Lefebvre

Employee

Avatar

Bruce_Lefebvre

Employee

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.