How to open the phone dialer?

Question

I am trying to launch the phone dialer in my worklight 6.2 hybrid application when clicking on a button and/or an anchor tag. Below is the code I am using.

button:

<button onClick='window.parent.location.href = "tel:+1xxxx"'>Tel</button>

anchor tag:

<a href='tel:[phone]' class="ui-link">[phone]</a>  

When we click on button/anchor tag below is the behavior in android and iOS.
In android:

Displays a pop up window with the message

Application Error net::ERR_UNKNOWN_URL_SCHEME (TEL:[phone])

In iOS:

The click event doesn't respond.

Answer 1

If you are using like this <a href="tel:[phone]">call this number</a> and you still getting an error saying ERR_UNKNOWN_URL_SCHEME then use cordova-plugin-invokedialer.

cordova-plugin-invokedialer- npm

Answer 2

Are you testing in the iOS Simulator? if so, you must test in a device.
For Android, you can test in either the Emulator or a device.

The following worked for me in an iOS device:

• <a href="tel:[phone]">call this number</a>
  Can be invoked right from the HTML

• document.location.href = "tel:[phone]";
  Can be invoked via a function on button tap

As for Android,

Due to security bugs in Cordova (and the fixes made to counter them), to get the above code to work, you need to open native\res\xml\config.xml and perform the following:

 - <access origin="*"/>
 + <access origin="tel:*" launch-external="true"/>

Answer 3

this cordova plugin are use

mx.ferreyra.callnumber 0.0.2 "Cordova Call Number Plugin"

Code

   <ion-fab left bottom>
    <a href="tel:number" class="button" ion-fab color="light">
        <ion-icon name="keypad"></ion-icon>
    </a>
</ion-fab>