解决微信浏览器中无法一键拨号问题tel

2023-08-27 10:47:58

公众号中需要在某些页面显示手机号码，并且需要点击后拨号. 原以为

可以解决了, 没想到在微信浏览器中并没有什么反应(老版本).

网上所有方案都是在链接地址加上锚点去解决这个问题. 但是目前网站的锚点已经用于单页面路由使用了，不适合这个方案.

于是想到了签入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>标签内，否则无效.

码农公寓

相关文章