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过渡_动力节点Java学院整理
Jul 11 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5样式控制示例代码
Nov 27 HTML / CSS
带你认识HTML5中的WebSocket
May 22 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
css3 实现文字闪烁效果的三种方式示例代码
Apr 25 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 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中防止SQL注入实现代码
2011/02/19 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
PHP中PCRE正则解析代码详解
2019/04/26 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
python的Template使用指南
2014/09/11 Python
python实现数据写入excel表格
2018/03/25 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
python2 与 python3 实现共存的方法
2018/07/12 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
难忘的一课教学反思
2014/04/30 职场文书
中学语文教学反思
2016/02/16 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
Python列表的索引与切片
2022/04/07 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python