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属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
Html5如何唤起百度地图App的方法
Jan 27 HTML / CSS
利用html5 canvas破解简单验证码及getImageData接口应用
Jan 25 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
Dec 31 HTML / CSS
html5实现多文件的上传示例代码
Feb 13 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
关于canvas.toDataURL 在iOS运行失败的问题解决
Sep 16 HTML / CSS
box-shadow单边阴影的实现
May 21 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环境――Appserv
2006/12/13 PHP
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP函数eval()介绍和使用示例
2014/08/20 PHP
php中memcache 基本操作实例
2015/05/17 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js鼠标及对象坐标控制属性详细解析
2013/12/14 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
[10:21]2018DOTA2国际邀请赛寻真——Winstrike
2018/08/11 DOTA
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python查找相似单词的方法
2015/03/05 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
详解Swift中属性的声明与作用
2016/06/30 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
办公文员的工作岗位职责
2013/11/12 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
解析Redis Cluster原理
2021/06/21 Redis