Как открыть диалог в WhatsApp Web при помощи JavaScript?

Question

[Надим]

Здравствуйте. Возникла необходимость открыть диалог имитацией клика на сам диалог во вкладке слева.

Однако, вызов click() напрямую не сработал и даже передача событий click/mouseup через diapatchEvent() не помогла.

Подскажите, пожалуйста, не сталкивался ли кто-то из вас ранее с такой же проблемой на WhatsApp и как вы ее решили?

Я знаю, что можно открыть диалог в WhatsApp вставив на страницу невидимую ссылку примерно такого вида: https://api.whatsapp.com/send?phone=79997775533
И затем кликнуть по ней. Однако мне данный способ не слишком нравится, хотелось бы попробовать найти другое решение.

Answer 1

[Надим]

Нашел на иностранном сайте, как симулировать клики на React. Ниже пример, который подходит и для WhatsApp:

const mouseClickEvents = ['mousedown', 'click', 'mouseup'];

function simulateMouseClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
          view: window,
          bubbles: true,
          cancelable: true,
          buttons: 1
      })
    )
  );
}

// Ищем диалог по номеру телефона:
var element = document.querySelector('span[title="[phone]"]');
simulateMouseClick(element); // Симулируем событие клика

Данный способ оказался рабочим, можно использовать. В целом оказалось достаточно одного события mousedown:

// Ищем диалог с по номеру телефона:
dialog = document.querySelector('span[title="[phone]"]');

// Вызываем событие mousedown на найденном элементе:
dialog.dispatchEvent(
  new MouseEvent('mousedown', {
      bubbles: true
  })
);

При этом bubbles является параметром обязательным, без него не работает.

Answer 2

[kocherman]

Так получаешь координаты элемента контакта:

document.querySelector('span[title=...]').getBoundingClientRect()

Вычисляешь среднюю точку, потом получаешь массив элементов по координатам этой точки:

document.elementsFromPoint( x, y );

Поробуй пройтись по всем элементам. Используй в dispatchEvent() не только ClickEvent, можно так же TouchEvent, MoutionEvent, FocusEvent.

И список событий есть в devinspector

Comments

[Надим]

Да как бы уже пробовал пройтись по всем родителям при помощи .dispatchEvent(new Event('click')) но увы. Как я понимаю WhatsApp использует React, но неужели в этом фреймворке нет каких-то стандартизированных событий для клика?

P. S. Блин, я погуглил про React и симуляцию кликов на нем и внезапно нашел рабочее решение на иностранном портале) Я очень рад, спасибо больше, что своим ответом невольно дали мне наводку)))

const mouseClickEvents = ['mousedown', 'click', 'mouseup'];

function simulateMouseClick(element){
  mouseClickEvents.forEach(mouseEventType =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
          view: window,
          bubbles: true,
          cancelable: true,
          buttons: 1
      })
    )
  );
}

// Ищем диалог по номеру телефона:
var element = document.querySelector('span[title="[phone]"]');
simulateMouseClick(element); // Симулируем событие клика

[kocherman]

Надим Закиров, создавать события лучше через document.createEvent().
А не обязательно там должен быть объект из родителей, там может нарисоваться какой-нибудь overlay.

[kocherman]

Надим Закиров, рад был помочь