如果已安装WhatsApp，请检测

Question

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

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

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

Answer 1

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

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

通过打开浏览器的devtool并搜索noHandlerCallback自己查看。在Chrome上，可以从devtools的菜单中找到“搜索”：

WhatsAppApiOpenUrl

Edit：这是一些示例代码。我很难让iframe在CodeSandbox中实际触发移动设备上的whatsapp，但是我希望功能不正常的示例仍然有所帮助。-请参见稍后的工作示例编辑。看看它是否在本地对您有用。

EDIT 2：此版本的

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 frame = document.createElement('iframe')
      frame.style.display = 'none'
      document.body.appendChild(frame)
      frame.src = uri

      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)
    })
  }

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

创建一个锚点元素，并以编程方式单击它。此版本在CodeSandbox中对我有用。

[请注意，就像前面的示例一样，此示例在每次调用时都会添加一个事件侦听器。如果您要将其推广到生产中，请在承诺解决后使用notOnIE删除window.removeEventListener。如果您认为重要，它也会创建一个DOM节点。

handleBlur

用法示例：

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()
  })
}

Answer 2

这里是我在Android上的测试：

• [

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

  如果安装了WA您可以使用Built-in Browser (Webview) and Firefox自动打开WhatsApp

• [iframe需要用户单击操作

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

Chrome and Opera

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