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的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
Jun 15 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
Oct 14 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 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
PHP获取MAC地址的函数代码
2011/09/11 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
React中Ref 的使用方法详解
2020/04/28 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
Python实现的简单发送邮件脚本分享
2014/11/07 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
python3实现表白神器
2019/04/09 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
大学军训感言800字
2014/02/27 职场文书
考试诚信承诺书
2014/05/23 职场文书
设计大赛策划方案
2014/06/13 职场文书
离婚协议书范文2015
2015/01/26 职场文书
投标单位介绍信
2015/05/05 职场文书
2015年环保局工作总结
2015/05/22 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python