做手机H5页面的时候经常会碰到在某一个页面会显示一个手机号,坑爹的产品会说你点击一下能不能让手机弹出号码,然后拨打出去,我试了试各种百度来的方法都是失败的,比如下面的这个:

<a href="tel:10086">10086</a>

还有下面的这个:

<a href="wtai://wp//mc;10086">10086</a> 
<a href="wtai://wp/ap;10086;">10086</a>

我就想说我为什么用了这些方法都不好使呢。手机按了半天都是提示错误。然后我就想了个扭曲的办法,其实和上面这些标签的道理是一样的,就是用javascript控制打电话:

在html中,把手机号传到一个js方法中:

<span onclick="callphone('10086');">
联系每个月都要花钱的大哥,对,就是10086
</span>

在javascript中,用jquery的方法

<script>
function callphone(tel){
window.location.href = "tel:"+tel;
}
</script>

间接的转化了a标签,试了一下就成功了,如果有小伙伴碰到这些问题可以变换一下思路。

by as

H5页面唤起手机号的更多相关文章

  1. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  2. h5页面唤起app(iOS和Android),没有安装则跳转下载页面

    浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...

  3. Vue的H5页面唤起支付宝支付

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支 ...

  4. 【笔记】h5 页面唤起电话呼叫

    参考文章:https://www.cnblogs.com/lilin1995/p/5640684.html 最近完成一个公司的官网移动端页面,涉及到了唤起电话这个功能,说实在js 并没有为此提供 ap ...

  5. H5页面中唤起native app

    现在各类app,分享出去的H5页面中,一般都会带着一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和导流量的策略,最近产品经理就提 ...

  6. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  7. H5页面中尝试调起APP

    安卓版本5.0以上 IOS版本10.0以上 采用事件触发的方式处理唤醒APP 市面上常见的功能 这种功能现如今应该非常普遍了,淘宝H5,知乎H5等等... 点击后会调起APP或者打开下载页面或者直接进 ...

  8. 移动浏览器H5页面通过scheme打开本地应用

    在移动端浏览器H5页面中,点击按钮打开本地应用主要通过 scheme 协议.本文主要介绍如何在浏览器H5页面中通过 scheme 协议打开本地应用. scheme协议定义 scheme 是一种页面之间 ...

  9. 判断终端类型、微信的文章防盗链、h5页面跳转打开新的app、跳转到app市场

    判断终端的类型.安卓.ios.微信.qq function  GetMobelType()  {                 var  browser  =   {                 ...

随机推荐

  1. tomcat8+idea远程调试

    window下 setenv.bat增加 set JPDA_OPTS=-Xrunjdwp:transport=dt_socket,address=8787,server=y,suspend=n lin ...

  2. mysql之处理金钱小数点后的多余0

    问题产生原因:我们在做基金项目   产生大量的金钱  在GP首页展示首页信息的时候要求去除多余的0   由于我们在数据库设计的时候查询返回数据 例如18.100000 这种形式  而我们需要将多余的0 ...

  3. 【3Sum Closest 】cpp

    题目: Given an array S of n integers, find three integers in S such that the sum is closest to a given ...

  4. C语言编程题001

    有一颗树,一年两个生长周期,春天它长高一倍,夏天长高1m,问N个周期后树有多高?假设从春天开始树高为1m,第0个周期树高为1m. 要求:1.可以同时输入多个生长周期 如:3//表示下面有几个生长周期 ...

  5. 如何在win7下安装python包工具pip

    1. 在安装pip前,请确认你win系统中已经安装好了python,和easy_install工具,如果系统安装成功,easy_install在目录C:\Python27\Scripts 下面, 确认 ...

  6. Python Flask构建可拓展的RESTful API

    1-1 Flask VS Django 1-2  课程更新维护说明: 1-3 环境.开发环境与Flask: 1.3.1 关注版本更新说明: 1-4 初始化项目:

  7. 深入学习之mysql(二)表的操作

    1.表:是数据库中的存储数据的基本单位,一个表包含若干个字段和值 2.创建表: CREATE TABLE 表名称 ( 字段名1 数据库类型1 [约束条件1], 字段名2 数据库类型2 [约束条件2], ...

  8. leetcode NO.349 两个数组的交集 (python实现)

    来源 https://leetcode-cn.com/problems/intersection-of-two-arrays/ 题目描述 给定两个数组,写一个函数来计算它们的交集. 例子: 给定 nu ...

  9. hadoop配置文件: hdfs-site.xml, mapred-site.xml

    dfs.name.dir Determines where on the local filesystem the DFS name node should store the name table( ...

  10. 项目记事【StreamAPI】:使用 StreamAPI 简化对 Collection 的操作

    最近项目里有这么一段代码,我在做 code-review 的时候,觉得可以使用 Java8 StreamAPI 简化一下. 这里先看一下代码(不是源码,一些敏感信息被我用其他类替代了): privat ...