解决微信浏览器中无法一键拨号问题tel
公众号中需要在某些页面显示手机号码,并且需要点击后拨号. 原以为
<a href="tel:10086">10086</a>
可以解决了, 没想到在微信浏览器中并没有什么反应(老版本).
网上所有方案都是在链接地址加上锚点去解决这个问题. 但是目前网站的锚点已经用于单页面路由使用了,不适合这个方案.
于是想到了签入iframe实现.
新建一个页面 calltelephone.html 在src中传入电话、iframe的ID、微信锚点, 同时通过样式和脚本调整iframe宽高,确保iframe宽高自适应电话的显示.以此达到目的
<html style="margin:0;padding:0;overflow:hidden;display:table;"> <body style="margin:0;padding:0;overflow:hidden;display:inline;" scroll="no""> <a href="tel:" style="text-decoration: none;"></a> </body> </html> <script type="text/javascript"> function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; } let frameid = getQueryString('id'); let link = document.getElementsByTagName('a'); link[0].setAttribute('href','tel:' + getQueryString('tel')); link[0].text = getQueryString('tel'); parent.document.getElementById(frameid).height = 0; parent.document.getElementById(frameid).width = 0; parent.document.getElementById(frameid).height = document.body.scrollHeight; parent.document.getElementById(frameid).width = document.body.scrollWidth; parent.document.getElementById(frameid).setAttribute('frameborder' ,"0"); </script>
使用方式:
<iframe id="iframepage" src=".html?tel=10086&id=iframepage#http://mp.weixin.qq.com"></iframe>
注意, 不要将iframe放入<label>标签内,否则无效.