H5如何唤醒打电话和发短信
简介：h5唤醒打电话和发短信，js唤醒打电话和发短信
在移动端页面，有时候我们需要唤起用户手机的打电话功能，拨打客服电话，以及发送短信功能，此时我们可以按照以下操作实现打电话和发短信功能
html唤起打电话或者短信功能都需要我们在head头部添加一个元数据标签，允许html唤起功能：
<meta name="format-detection" content="telephone=yes"/>1. html唤起打电话功能
通过a标签唤起打电话功能
<a href="tel:4000-000-000">拨打电话</a>当然，我们也可以通过js唤起打电话功能
window.location.href = 'tel:4000-000-000';基于wtai协议唤起打电话功能
<a href="wtai://wp//mc;10086">拨打10086 </a>
<a href="wtai://wp/ap;10086;">存储</a>移动web页面自动探测电话号码，需要在head头部添加如下标签：
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">2.html唤起发短信功能
和打电话一样，可以通过a标签唤起发送短信功能，还可以设置短信内容：
<a href="sms:10086">发送短信</a>
<a href="sms:10086?body=短信内容">发送短信并带上短信内容</a>js唤起打电话功能
// 添加内容
window.location.href = 'sms:10086?body=短信内容';
// 不添加内容
window.location.href = 'sms:10086';如果h5允许在微信客户端，会被微信屏蔽。目前没有好的办法，网上有一些解决方法，说是在手机号后面添加 #mp.weixin.qq.com
<a href="tel:10086#mp.weixin.qq.com">联系</a>
<a href="sms:10086#mp.weixin.qq.com">发送短信</a>这个方法我自己没有实验过，大家可以自己试试
完整代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=yes"/>
<title>h5唤起打电话和发短信</title>
</head>
<body>
<a href="tel:4000-000-000">拨打电话</a>
<button onclick="openTel">js唤起打电话</button>
<a href="sms:10086">发送短信</a>
<button onclick="openSms">js唤起发短信</button>
<script type="application/javascript">
function openTel(){
window.location.href = 'tel:4000-000-000';
}
function openSms(){
window.location.href = 'sms:10086?body=短信内容';
}
</script>
</body>
</html>有遗漏或者不对的可以在我的公众号留言哦
