Глядя на страницу, кажется, что, по крайней мере, на Chrome они программно открывают iframe с sr c, равным whatsapp://send/?phone=<number>&text=test. Затем они запускают тайм-аут 1000 мс, после чего «Похоже, у вас не установлен WhatsApp!» текст отображается. Этот тайм-аут отменяется обработчиком событий blur, что означает, что их проверка основана на открытии WhatsApp вашего устройства при загрузке этого URL, что приводит к размытию окна.
При IE они используют window.navigator.msLaunchUri, который принимает noHandlerCallback.
Убедитесь сами, открыв devtools вашего браузера и выполнив поиск WhatsAppApiOpenUrl. На Chrome Поиск можно найти из меню devtools:
Редактировать : Вот пример кода. Я с трудом заставляю iframe фактически запускать WhatsApp на мобильном устройстве в CodeSandbox, , но я надеюсь, что неработающий пример все еще немного помогает. - См. Более позднее редактирование рабочего примера, Посмотрите, работает ли он у вас локально.
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()
}
РЕДАКТИРОВАТЬ 2: Эта версия notOnIE создает элемент привязки и щелкает по нему программно. Эта версия работает для меня в CodeSandbox.
Обратите внимание, что, как и в предыдущем примере, эта программа добавляет прослушиватель событий при каждом вызове. Если вы внедряете это в производство, используйте window.removeEventListener, чтобы удалить handleBlur после того, как обещание будет выполнено. Он также создает узел DOM, если это важно для вас.
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()
})
}
Пример использования:
detectWhatsapp('<your number here>', 'test').then(hasWhatsapp =>
alert('You ' + hasWhatsapp ? "don't have WhatsApp" : 'have WhatsApp')
)