HTML5调用手机发短信和打电话功能


Posted in HTML / CSS onApril 29, 2020

前言

本来感觉用H5写调用电话拨号功能和发送短信功能会很不好写,后来通过实践得出,其实很简单的。
首先简单介绍一下业务功能,就是显示通讯录中的人员用户信息,然后分别点击相应的按钮来发送短信和拨通电话

HTML5调用手机发短信和打电话功能

正文

来看看HTML的关键代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>公司通讯录</title>
		//一定要加的引用
		<meta name="apple-mobile-web-app-capable" content="yes">
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="background-color: #ffffff;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #000000;font-size: 25px;"></a>
			<h1 class="mui-title">个人信息</h1>
		</header>
		<div class="mui-page-content" >
				<div class="mui-scroll" style="background-color: #FFFFFF;">
					<div class="mui-button-row" style="margin-bottom: 40%;margin-top: 10%;">
					//发消息的关键代码href 个id 会在js中写出来
						<a href="#" id="urls" > 
							<i class="iconfont icon-Group- " style="font-size: 18px;"></i>  发消息  </a>
						//拨号的关键代码href 个id 会在js中写出来
						<a href="#" id="url" > 
						<i class="iconfont icon-dianhua iconback " style="font-size: 18px;"></i>  打电话
				</div>
			</div>
		</div>
	</body>
</html>
//拨号的写法
			document.getElementById("url").href = 'tel:' +具体的电话号码;
			//发短信的写法
			document.getElementById("urls").href = 'sms:' + 具体的电话号码;

代码精炼

<head>里面加上:

<meta name="format-detection" content="telephone=yes"/>

需要拨打电话的地方:

<a href="tel:400-0000-688">400-0000-688</a>

发短信:

<a href="sms:18688888888">发短信</a>

结束

其实好多功能都不是特别难,只是不熟悉,软件开发就是不断的熟悉的过程。

到此这篇关于HTML5调用手机发短信和打电话功能的文章就介绍到这了,更多相关html5 发短信打电话内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3伪类选择器:nth-child()
Apr 02 HTML / CSS
纯css3使用vw和vh实现自适应的方法
Feb 09 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
HTML5-WebSocket实现聊天室示例
Dec 15 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
简单聊聊H5的pushState与replaceState的用法
Apr 03 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 #HTML / CSS
HTML5中的网络存储实现方式
Apr 28 #HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 #HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 #HTML / CSS
You might like
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
vue实现购物车加减
2020/05/30 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
使用python分析git log日志示例
2014/02/27 Python
PyQt5每天必学之QSplitter实现窗口分隔
2018/04/19 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
String这个类型的class为何定义成final?
2012/11/13 面试题
办公室文秘岗位职责
2013/11/15 职场文书
临床医学专业学生的自我评价分享
2013/11/21 职场文书
人大调研汇报材料
2014/08/14 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书