在 iframe 中调用点击事件答案

【问题标题】：Call tap event into iframe在 iframe 中调用点击事件
【发布时间】：2020-05-19 16:31:33
【问题描述】：

我正面临一个我无法解决的大问题。

我用 react js 开发了一个应用程序（app1）。此应用程序将与 i 框架一起包含在同一域下的另一个应用程序 (app2) 中。 App2 必须访问 iframe 内的对象并在按钮上触发 TAP 事件（无点击）。 Tap事件是jquery mobile的自定义事件，我认为它是在一个无法更改的旧库中使用的。我尝试了各种方式，但我真的不知道如何解决这个问题。 Web 组件可以解决我的问题吗？我可以使用 jquery 和 jquery mobile 创建一个 Web 组件按钮，并包含在反应应用程序中。可以解决吗？否则我认为我必须从头开始用 jquery 编写应用程序。

【问题讨论】：

改用click，或使用触摸事件创建自定义事件。
我不能使用click，因为库使用tap，我不能修改库。有没有办法从外部调用 trigger('tap') 并在 iframte 内部调用 click？

标签： jquery reactjs iframe jquery-mobile

【解决方案1】：

无法完全理解您的问题，tap 只是一个名称，即您可以将其称为“单点触控”或任何您想要的名称。也许您只需要在iframe 中找到那个按钮并添加一个eventListener 即可。

无论如何，如果您在 iframe 中包含 JQM，JQM 将在 750 毫秒内将tap 识别为同一目标上的一系列触摸事件。

这是模拟 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);

【讨论】：

【解决方案2】：

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

【讨论】：

触摸屏没有“mouseover”、“mouseout”