iphone chrome href tel link in iframe not working

Question

If we include our page in iFrame and if page is having phone link eg ( ) then on the iPhone's chrome browser, the link doesn't work. It does not open the phone dialer. However, it's working on iPhone's safari browser and all desktop browsers. This happens on all iPhones from version 9 onward. My question is, this is a known issue Or an iPhone OS restriction?

Answer 1

Initiate the call using Javascript and window object, first detecting which browser the user is on.

What's Happening

1. You create two buttons. One is to start the call. The other is hidden to make the call without changing the view for regular browsers.
2. When the user clicks the button the javascript will use navigate.userAgent to determine if the browser is Google Chrome on iOS, Android, etc.
3. If the userAgent is Chrome for iOS or mobile the window method is called, otherwise the hidden a tag is called.

//Javascript

function isChromeOnAndroid() {
 var userAgent = navigator.userAgent;
 return /Chrome/.test(userAgent) && /Android/.test(userAgent);
}

function isChromeMobile() {
  var userAgent = navigator.userAgent;
  return /Chrome/.test(userAgent) && /Mobile/.test(userAgent);
}

function isChromeOniOS() { 
 return /CriOS/.test(navigator.userAgent) || /GSA/.test(navigator.userAgent);
}

function callNumber = (number) => {
  console.log('calling number', number);
  
  // If chrome or android
  if (isChromeMobile() || isChromeOnAndroid() || isChromeOniOS()) {
    console.log("Browser is Chrome on a mobile device");
    window.open(`tel:${number}`);
    return;
  }
      
  // else
  var hiddenCallLink = document.getElementById('hiddenCallLink');
  hiddenCallLink.href = `tel:${number}`;
  hiddenCallLink.click();
}

<!-- HTML --> 

<a id="hiddenCallLink" href="" style="display: none;">Call Action Hidden</a>

<a href="#" onclick="callNumber('+12345678901');">Call +1 (234) 567-8901</a>

References Google Chrome UserAgent - GSA and CriOS is for Chrome on iOS

I hope this helps