Вызовите событие касания в iframe - PullRequest
Новая
       11

Вызовите событие касания в iframe

0 голосов
/ 04 февраля 2020

Я столкнулся с большой проблемой, которую не могу решить.

Я разработал приложение (app1) с реакцией js. Это приложение будет включено в i frame в другое приложение (app2) в том же домене. App2 должен получить доступ к объекту внутри iframe и вызвать событие TAP (без щелчка) на кнопке. Событие Tap - это пользовательское событие jquery mobile, и я думаю, что оно используется в старой библиотеке, которую нельзя изменить. Я пытался по-разному, но я действительно не знаю, как решить эту проблему. Может ли веб-компонент решить мою проблему? Я могу создать кнопку веб-компонента с помощью мобильного телефона jquery и jquery и включить ее в приложение реакции. Может быть решение? В противном случае думаю, что я должен написать приложение с jquery с нуля.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2020

https://gist.github.com/jaydson/1780598

var myConfObj = {
  iframeMouseOver : false
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    console.log('Wow! Iframe Click!');
  }
});

document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('YOUR_CONTAINER_ID').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});
0 голосов
/ 04 февраля 2020

Не могу полностью понять Ваш вопрос, tap - это всего лишь имя, т. Е. Вы можете называть его «singletouch» или как хотите. Возможно, вам просто нужно найти эту кнопку внутри iframe и добавить к ней eventListener.

В любом случае, если вы включите JQM в свой iframe, tap будет распознан JQM как последовательность событий касания в пределах 750 мс на одной цели.

Вот минимальная заглушка для эмуляции JQM tap: 

function raiseTap(target) {
  // just only one touch in list is enough
  var tcs = Array(new Touch({
        identifier: Date.now(),
        target: target,
        clientX: 0,
        clientY: 0
      }));

  // emulate a bubbling JQM tap 
  // if needed, add touchmove inbetween
  var events = ["touchstart", "touchend"],
      params = {touches: tcs, bubbles: true, changedTouches: tcs};
  for(var i=0, l=events.length; i<l; i++) {
    target.dispatchEvent(new TouchEvent(events[i], params));
  }
}

// find the target
var iframe = document.getElementById("iframe"),
    doc = iframe.contentDocument || iframe.contentWindow.document,
    btn = doc.getElementById("button");

raiseTap(btn);
...