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

<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>标签内，否则无效.

解决微信浏览器中无法一键拨号问题tel的更多相关文章

  1. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  2. 解决微信浏览器无法使用reload()刷新页面

    场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信 ...

  3. 在微信浏览器中 location.reload() 不刷新解决方案(直接调用方法)

    1.问题 在微信浏览器中,需要时刷新当前页面. 正常情况下我们直接使用 location.reload 方法来刷新. 2.解决方法 function realod(){ var {search,hre ...

  4. 利用gulp解决微信浏览器缓存问题

    做了好多项目,这次终于要解决微信浏览器缓存这个令人头疼的问题了.每次上传新的文件,在微信浏览器中访问时,总要先清除微信的缓存,实在麻烦,在网上搜罗了很多解决办法,终于找到了方法:利用gulp解决缓存问 ...

  5. vue-router 在微信浏览器中操作history URl未改变的解决方案

    在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...

  6. 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

  8. 解决微信浏览器video全屏的问题

    解决微信浏览器video全屏的问题 在微信浏览器里面使用video标签,会自动变成全屏,改成下面就好了,起码可以在video标签之上加入其他元素. <video id="videoID ...

  9. js判断是否是在微信浏览器中打开

    // js判断是否是在微信浏览器中打开 function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/Mi ...

随机推荐

  1. Python3 指定文件夹下所有文件（包括子目录下的文件）拷贝到目标文件夹下

    #!/usr/bin/env python3 # -*- coding:utf8 -*- # @TIME :2018/9/17 9:02 # @Author:dazhan # @File :copyf ...

  2. Python爬虫案例-获取最新的中国行政区域划分

    源网页:中国统计局标准 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2016/ 打开网页后可以分析出行政区域划分共分为5层 根据传入参数,生成网页 ...

  3. HDU - 1062

    格式错误2遍:没考虑到连续两个空格的情况,遇到空格最后要输出这个空格,因为题目只需要转换单词. 另外,开cin,cout加速要注意读入不能用scanf,printf,puts,getchar这些.ge ...

  4. 补记：完成了NG的SP1的全部内容 开始第二周

    DL本质上就是多层的Logistics Regression with different activation function and nicely designed back propagati ...

  5. 2018-2019 网络对抗技术 20165231 Exp5 MSF基础应用

    实践内容(3.5分) 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.1一个主动攻击实践(1分) ms08_067; (失败) MS17-010永 ...

  6. Spring Cloud 2-RabbitMQ 集成(八)

    Spring Cloud  RabbitMQ  pom.xml application.yml 提供者 消费者 队列配置 单元测试 通过消息队列MQ做为通信中心,这里采用RabbitMQ.安装方参考: ...

  7. 前端笔记之JavaScript（五）关于数组和字符串那点事

    一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]” ...

  8. ubuntu16.4下使用QT修改系统时间

    我也是在网上找的,自己随便改了一下六个lineEdit控件,每个控件输入日期时间,点击按钮触发函数可修改时间. 1 //一键修改系统时间 QString year = ui->lineEdit_ ...

  9. 怎样解决if __name__ == "__main__":下面的代码没有执行的问题

    很多初学者可能在用pycharm运行代码时会出现if __name__ == "__main__":下面的代码没有执行的问题,出现这类问题的原因是unittest运行姿势造成的,如 ...

  10. [转]Go里面的unsafe包详解

    Golang的unsafe包是一个很特殊的包. 为什么这样说呢? 本文将详细解释. 来自go语言官方文档的警告 unsafe包的文档是这么说的: 导入unsafe的软件包可能不可移植,并且不受Go 1 ...