Detecting HTML <a> click-to-call support in Javascript

Question

There are two ways to have click-to-call links in HTML

• <a href="wtai://wp/mc;+1800229933</a> WTAI style (Nokia, others)

• <a href="tel:+1-800-275-2273">Call Apple Customer Support at 1-800-275-2273</a>. TEL style (Apple)

How one can

• detect which format is supported by current user agent in Javascript?

• Is it possible to do the detection without relying the user agent string

More info

• http://www.mobilexweb.com/blog/click-to-call-links-mobile-browsers

• http://www.raizlabs.com/blog/2007/07/02/iphone-telephone-hyperlinks/

Answer 1

Max Firtman has a great article on how to create click-to-call links for mobile browsers. He states that the tel: protocol is supported by almost every mobile device, including: Safari on iOS, Android Browser, webOS Browser, Symbian browser, Internet Explorer, Opera Mini and low-end devices browsers.

Because of the wide support of the tel: protocol, I would suggest just use the tel: protocol. To support Nokia I would check if the navigator.userAgent contains Nokia footprint. If so, replace tel: to wtai://wp/mc;

If you can use jQuery, the Javascript could look something like:

if (/(Series60|Nokia)/i.test(navigator.userAgent)){
  $("a[href^='tel:']").each(function(){
    this.href = this.href.replace("tel:", "wtai://wp/mc;");
  });
}