Html移动端保存电话到手机通讯录

最新推荐文章于 2024-09-02 16:05:15 发布

Winter Li

最新推荐文章于 2024-09-02 16:05:15 发布

阅读量1.4k

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 html5

本文链接：https://blog.csdn.net/qq_41837743/article/details/134449521

序言

本文主要是讲解在html移动端中，点击电话号码时，将电话号码保存到手机的通讯录中。该功能在Android系统和IOS系统中实现有所不同，Android利用a标签中的WTAI协议进行实现。而在IOS系统中，目前只了解到了能在Safari浏览器中利用生成vcf文件进行实现。

一、Android实现

WTAI介绍

WTAI 全称Wireless Telephony Applications Interface 。目前，越来越多的浏览器都支持这个功能，但还不是所有。Phone.com, Mitsubishi 和 Ericsson 已经在浏览器中集成了。在WML中可以调用设备的WTAI函数来呼叫特定的电话号码(最常用的功能之一)。

代码实现

以下列举了拨打电话和保存通讯录的代码，tel在Android和IOS中都支持。

<html>
    <head></head>
    <body>
        <a href="tel://13191835108"> 
	        点击拨打电话
        </a>
        <a href="wtai://wp/mc;13191835108">
            点击保存到通讯录
        </a>
    </body>
</html>

二、IOS系统实现

VCF文件介绍

VCF格式通讯录格式用途广泛，一般诺基亚、摩托罗拉手机导出通讯录的格式即为VCF。可以把VCF格式保存到电脑上以备不时之需。而且很多网上通讯录的导入格式也是VCF，例如飞信就加入了导入联系人的功能，可以把手机通讯录导入飞信的通讯录里，这样不管你手机在不在，只要有一台电脑就可以对自己的通讯录里的人了如指掌了。

代码实现

创建一个vcf文件放入到a标签的href属性中，点击a标签即可实现保存通讯录。

<html>
<head></head>
<body>
    <a id="card_btn_phone" href="">点击在Safari中保存到通讯录</a>
    <script>
        var contact = {
            name: '姓名',
            phone: '17778789898',
            email: '123@qq.com'
        };
        // create a vcard file
        var vcard = "BEGIN:VCARD\nVERSION:4.0\nFN:" + contact.name + "\nTEL;TYPE=work,voice:" + contact.phone + "\nEMAIL:" + contact.email + "\nEND:VCARD";
        var blob = new Blob([vcard], { type: "text/vcard" });
        var url = URL.createObjectURL(blob);
        document.getElementById('card_btn_phone').download = contact.name + ".vcf";
        document.getElementById('card_btn_phone').href = url
    </script>
</body>
</html>

参考该链接：iphone - save contacts using safari - Stack Overflow

三、拓展

1、邮箱唤起

<a id="card_btn_email" href="mailto:123@qq.com">

2、文本复制（可应用于快速复制电话号码或者邮箱）

function textCopy(t) {
    // 如果当前浏览器版本不兼容navigator.clipboard
    if (!navigator.clipboard) {
        var ele = document.createElement("input");
        ele.value = t;
        document.body.appendChild(ele);
        ele.select();
        document.execCommand("copy");
        document.body.removeChild(ele);
        if (document.execCommand("copy")) {
            console.log("复制成功！");
            copyAnimination()
        } else {
            console.log("复制失败！");
        }
    } else {
        navigator.clipboard.writeText(t).then(function () {
            console.log("复制成功！");
            copyAnimination()
        }).catch(function () {
            console.log("复制失败！");
        })
    }
}