检测是否安装了 WhatsApp答案

【问题标题】：Detect if WhatsApp is installed检测是否安装了 WhatsApp
【发布时间】：2021-08-05 19:55:29
【问题描述】：

使用 Android 或桌面浏览器，请访问此WhatsApp test page 并单击Send 按钮。如果未安装 WhatsApp，它将向您显示一条消息。

该页面上的代码检测如何工作？我尝试了以下方法，但没有任何反应。

try {
  location.href = 'whatsapp://send/?phone=62812345678&text=test';
} catch (e) {
  console.log(e);
}

【问题讨论】：

Linking?纯JS中的代码如何
stackoverflow.com/questions/27321472/…
How the code detection on that page work? - 您可以使用 Google Chrome 桌面中的开发工具（F12 键）自己查看客户端代码。网络选项卡将显示添加到页面的所有代码。
@jpthesolver2 谢谢，但它不起作用blocked by CORS policy
@DaveS 正如我在上面写的网络选项卡只告诉我它打开了whatsapp://... javascript 非常大而且缩小/不可读我找不到监听器的代码。

标签： javascript whatsapp

【解决方案1】：

查看该页面，似乎至少在 Chrome 上，他们以编程方式打开了一个带有whatsapp://send/?phone=<number>&text=test src 的 iframe。然后他们开始一个 1000 毫秒的超时，之后“看起来你没有安装 WhatsApp！”显示文本。此超时由blur 事件处理程序取消，这意味着他们的检查基于您的设备在加载该 URL 时打开 WhatsApp，这会模糊窗口。

超时后触发的函数似乎也检查超时时间是否超过 1250 毫秒。我怀疑这可以处理手机浏览器在更改应用程序时停止执行 JS 计时器的情况。

在 IE 上，他们使用window.navigator.msLaunchUri，它接受noHandlerCallback。

打开浏览器的开发工具并搜索WhatsAppApiOpenUrl，亲自查看。在 Chrome 上，可以从开发工具的菜单中找到搜索：

这是一些示例代码。

const detectWhatsapp = (phone, text) => {
  const uri = `whatsapp://send/?phone=${encodeURIComponent(
    phone
  )}&text=${encodeURIComponent(text)}`;

  const onIE = () => {
    return new Promise((resolve) => {
      window.navigator.msLaunchUri(
        uri,
        () => resolve(true),
        () => resolve(false)
      );
    });
  };

  const notOnIE = () => {
    return new Promise((resolve) => {
      const a =
        document.getElementById("wapp-launcher") || document.createElement("a");
      a.id = "wapp-launcher";
      a.href = uri;
      a.style.display = "none";
      document.body.appendChild(a);

      const start = Date.now();
      const timeoutToken = setTimeout(() => {
        if (Date.now() - start > 1250) {
          resolve(true);
        } else {
          resolve(false);
        }
      }, 1000);

      const handleBlur = () => {
        clearTimeout(timeoutToken);
        resolve(true);
      };
      window.addEventListener("blur", handleBlur);

      a.click();
    });
  };

  return window.navigator.msLaunchUri ? onIE() : notOnIE();
};

请注意，它每次调用时都会添加一个事件侦听器。如果您将其推广到生产环境中，请在承诺解决后使用window.removeEventListener 删除handleBlur。如果这对您很重要，它还会将一个 DOM 节点附加到正文中。

使用示例：

detectWhatsapp('<your number here>', 'test').then(hasWhatsapp =>
  alert(
     'You ' + 
        (hasWhatsapp ? 'have WhatsApp' : "don't have WhatsApp")
  )
)

【讨论】：

希望看到一个带有 sn-p 的一般示例 (:
好的，请稍等。
@A.Meshu 我已经用一个示例编辑了我的帖子，但我很难让它在 CodeSandbox 中的移动设备上运行。请试一试，看看它是否适合您本地！我能够使用<a> 获得链接，所以也许你可以使用锚标记和.click() 做同样的技巧。
@A.Meshu 我设法通过锚元素技巧让它为自己工作。我将其添加到我的答案中。
@cubbrr 我检查了第一个编辑，它有效！干得好！

【解决方案2】：

这是我在 Android 上的测试：

Built-in Browser (Webview) and Firefox 如果安装了 WA 您可以使用 iframe 自动打开 WhatsApp
Chrome and Opera需要用户点击操作

但幸运的是，我只需要这个简单的代码来检测是否安装了 whatsapp

document.querySelector('#openWA').addEventListener('click', function() {
  var f = Date.now(),
    j = setTimeout(function() {
      if (Date.now() - f > 1250)
        return;
      alert('WA not installed')
    }, 1e3);
})

<a href="whatsapp://send/?phone=62812345678&amp;text=test" id="openWA">Send to WhatsApp</button>

<!-- Auto open on WebView and Firefox -->
<iframe id="launcher" src="whatsapp://send/?phone=62812345678&amp;text=test" style="display: none;"></iframe>

【讨论】：

【解决方案3】：

如果你有 jquery，如果whats 应用程序没有打开使用whatsapp web 而不是iframe 启动器打开一个新页面，则基于上面的代码：

$('a[href^="whatsapp://send?"]').click(function() {
    var button = this,
     f = Date.now(),
    j = setTimeout(function() {
        if (Date.now() - f > 1025){
            return;
        }else{
            var newLink = button.getAttribute('href').replace("whatsapp://send?", "https://web.whatsapp.com/send?");
            button.setAttribute('href', newLink); 
            button.setAttribute('target', "_blank"); 
            $(button).closest('div').append('<a class="hide new" href="' + newLink + '" target="_blank" ></a>');
            $(button).closest('div').find('a.new')[0].click();
        }
    }, 1e3);        

})

【讨论】：