在 iframe 中调用点击事件

Posted 2023-05-09

【中文标题】在 iframe 中调用点击事件

【英文标题】：Call tap event into 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？

【参考方案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”