如何用JavaScript实现iOS和Android双端唤起WhatsApp？

问题原因 #

iOS Safari对window.open()的触发有严格限制，只有在**用户主动交互（比如点击、触摸事件）**的上下文里调用才会生效，否则会被浏览器拦截。另外，直接使用window.open在iOS上唤起App的兼容性，不如通过创建<a>标签模拟点击的方式可靠。

可行解决方案 #

方案1：基于用户点击事件触发，用<a>标签模拟跳转 #

创建隐藏的<a>标签并触发点击，这种方式在iOS和Android上都能稳定生效，且符合浏览器的交互规则：

// 给触发按钮绑定点击事件（必须是用户主动触发的操作）
document.getElementById('whatsapp-launch-btn').addEventListener('click', function() {
    const targetPhone = '15551234567'; // 目标号码，需带国际区号，无特殊字符
    const waUrl = `https://wa.me/${targetPhone}`;
    
    // 创建临时a标签
    const link = document.createElement('a');
    link.href = waUrl;
    link.target = '_blank';
    
    // 插入页面并触发点击
    document.body.appendChild(link);
    link.click();
    // 移除临时标签
    document.body.removeChild(link);
});

方案2：添加唤起失败的 fallback 逻辑 #

如果用户未安装WhatsApp，可通过计时判断唤起状态，引导跳转至网页版：

document.getElementById('whatsapp-launch-btn').addEventListener('click', function() {
    const targetPhone = '15551234567';
    const waDeepLink = `https://wa.me/${targetPhone}`;
    const startTime = Date.now();
    
    // 尝试唤起App
    window.location.href = waDeepLink;
    
    // iOS上唤起App后页面会进入后台，计时会暂停，以此判断是否唤起成功
    setTimeout(() => {
        const elapsed = Date.now() - startTime;
        if (elapsed < 1500) {
            // 唤起失败，跳转至WhatsApp网页版
            window.location.href = `https://api.whatsapp.com/send?phone=${targetPhone}`;
        }
    }, 1000);
});

关键注意事项 #

• 必须确保唤起操作在用户主动交互回调中执行，iOS Safari禁止非用户触发的跳转/弹窗。
• 优先使用wa.me链接，它更适合直接唤起App，api.whatsapp.com更偏向网页版 fallback。
• 号码格式要正确：仅保留数字，带国际区号，不能包含空格、括号、加号等特殊字符。

内容的提问来源于stack exchange，提问作者Meraj Aslam