HTML5調(diào)用手機(jī)發(fā)短信和打電話功能
文章主要介紹了HTML5調(diào)用手機(jī)發(fā)短信和打電話功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下前言本來(lái)感覺用H5寫調(diào)用電話撥號(hào)功能和發(fā)送短信功能會(huì)很不好寫...
文章主要介紹了HTML5調(diào)用手機(jī)發(fā)短信和打電話功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
前言
本來(lái)感覺用H5寫調(diào)用電話撥號(hào)功能和發(fā)送短信功能會(huì)很不好寫,后來(lái)通過(guò)實(shí)踐得出,其實(shí)很簡(jiǎn)單的。
首先簡(jiǎn)單介紹一下業(yè)務(wù)功能,就是顯示通訊錄中的人員用戶信息,然后分別點(diǎn)擊相應(yīng)的按鈕來(lái)發(fā)送短信和撥通電話
正文
來(lái)看看HTML的關(guān)鍵代碼
<!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">個(gè)人信息</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%;">
????????????????????//發(fā)消息的關(guān)鍵代碼href 個(gè)id 會(huì)在js中寫出來(lái)
????????????????????????<a href="#" id="urls" >
????????????????????????????<i class="iconfont icon-Group- " style="font-size: 18px;"></i> 發(fā)消息 </a>
????????????????????????//撥號(hào)的關(guān)鍵代碼href 個(gè)id 會(huì)在js中寫出來(lái)
????????????????????????<a href="#" id="url" >
????????????????????????<i class="iconfont icon-dianhua iconback " style="font-size: 18px;"></i> 打電話
????????????????</div>
????????????</div>
????????</div>
????</body>
</html>
//撥號(hào)的寫法
????????????document.getElementById("url").href = 'tel:' +具體的電話號(hào)碼;
????????????//發(fā)短信的寫法
????????????document.getElementById("urls").href = 'sms:' + 具體的電話號(hào)碼;
代碼精煉
<head>里面加上:
<
meta
name
=
"format-detection"
content
=
"telephone=yes"
/>
需要撥打電話的地方:
<
a
href
=
"tel:400-0000-688"
>400-0000-688</
a
>
發(fā)短信:
<a href="sms:18688888888">發(fā)短信</a>
結(jié)束
其實(shí)好多功能都不是特別難,只是不熟悉,軟件開發(fā)就是不斷的熟悉的過(guò)程。
到此這篇關(guān)于HTML5調(diào)用手機(jī)發(fā)短信和打電話功能的文章就介紹到這了,更多相關(guān)html5 發(fā)短信打電話內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章
HTML5標(biāo)簽HTMLCollection和NodeList的區(qū)別詳解
文章主要介紹了HTML5中的HTMLCollection和NodeList的區(qū)別詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧HTML5 HTMLCollection和NodeList的...
HTML5網(wǎng)頁(yè)中iframe與window.onload如何使用詳解
文章主要介紹了iframe與window.onload如何使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。前言在項(xiàng)目上,需要等頁(yè)面加載完之后再執(zhí)行一...
HTML5網(wǎng)頁(yè)body設(shè)置自適應(yīng)全屏示例代碼
文章主要介紹了HTML5 body設(shè)置自適應(yīng)全屏,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧用什么代碼實(shí)現(xiàn)?不允許有白色底色產(chǎn)生,因?yàn)槭謾C(jī)高度不一...
Html5 canvas中width、height和style的寬高區(qū)別詳解
文章主要給大家介紹了關(guān)于H5 canvas中width、height和style的寬高區(qū)別的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們...
一張圖看懂HTML5的前端性能優(yōu)化
最近1個(gè)月一直在設(shè)計(jì)HTML5相關(guān)的產(chǎn)品,沒錯(cuò),主要是用于微信的,雖然很多情況下,HTML5頁(yè)面的設(shè)計(jì)類似于APP,但是由于是網(wǎng)頁(yè)性的東西,對(duì)移動(dòng)網(wǎng)絡(luò)帶寬和瀏覽器性能,CPU,GP...
YouTube默認(rèn)HTML5視頻播放技術(shù) 或引發(fā)流媒體視頻終端升級(jí)風(fēng)暴
近日,YouTube工程總監(jiān)RichardLeider發(fā)文寫道,在Chrome、IE11、Safari8和beta版Firefox瀏覽器中,YouTube已默認(rèn)采用HTML5技術(shù)播放視頻。
他說(shuō),4年前YouTube開始嘗試HTML5技術(shù),當(dāng)...