如何使 iframe 具有指针事件：无；但不是在那里面的一个div上？

Posted 2023-03-05

【中文标题】如何使 iframe 具有指针事件：无；但不是在那里面的一个div上？

【英文标题】：How can you make an iframe have pointer-events: none; but not on a div inside that?

【发布时间】：2014-06-13 08:16:02

【问题描述】：

我有一个带有继承 pointer-events: none; 的 iframe，但是当我在带有 pointer-events: auto; 的 iframe 中插入 <div> 时，div 不会对点击或任何鼠标悬停事件做出反应。

原因是iframe 在<div style="position:fixed;"> 内 所以它有点像一个小菜单。但我希望用户点击iframe，而不是通过 iframe 中的链接和 div。

是的，它绝对需要保持 iframe。

我怎么能绕过这个？我什至可以绕过这个吗？

这是一个简单的例子：jsfiddle.net/MarcGuiselin/yLo119sw/2

【问题讨论】：

你能在jsfiddle.net 上创建一个演示来显示问题吗？

给你：jsfiddle.net/MarcGuiselin/yLo119sw/1 原谅我的幽默尝试

嗨@mar​​c-guiselin，我也有同样的问题。我正在努力寻找方法，但没有运气。如果你能告诉我你的解决方法，如果你找到了，我将不胜感激......谢谢。

@hosjay 不幸的是我没有找到

【参考方案1】：

根据您在 jsfiddle 上上传的示例，您正在使用 position:absolute... 将 z-index 添加到“您无法点击我，因为我在 iframe 后面”按钮允许我点击它。

Z-Index

编辑：如果您想在除一个div 之外的任何地方执行pointer-events: none;，您可以在每个element 中添加pointer-events 而不是iframe。根据您在小提琴中的示例，如果您想保存 Nicholas Cage 但阻止其他事件，您可以执行以下操作：

switchbutton.onclick=function()
   this.innerhtml="reload to reset";
   //iframe.style.pointerEvents="none";
   cantclick.innerHTML="You can click me now! :)";
   iframe.contentDocument.body.innerHTML="<button>You can't click me now because my parent iframe is click-through! :(</button><br>or save this gorgeous image of your favorite actor which may or may not be relavant to the problem.<br><img id='nicholasCage' src='http://media2.popsugar-assets.com/files/2014/01/06/008/n/1922283/131b4126c7b8738f_thumb_temp_image333458751389045360.jpg.xxxlarge/i/Best-Nicolas-Cage-Memes.jpg'/>";

   var iframeBody = iframe.contentDocument,
       elements = iframeBody.querySelectorAll("*"),
       i,
       len = elements.length;

   for(i=0;i<len;i++)
       elements[i].style.pointerEvents="none";
   

   iframeBody.getElementById("nicholasCage").style.pointerEvents="all";

如果你可以使用 jQuery，你可以使用 $("iframe *").css("pointer-events","none"); 更快地完成它

【讨论】：

显然。目标不是在 iframe 上单击按钮，而是要弄清楚当 mouseevent 不在 iframe 内的某个东西上时如何允许 mousevents 穿透 iframe

对不起，我想我没听懂（我的错，因为我的英语有点烂......）。好的，现在我已经深入检查了你的 jsfiddle，当出现 NCage 时，你想点击按钮“你不能点击我......”？你可以使用javascript来做到这一点，这是你要求的吗？ （再次道歉）

好的，所以你想禁用 iframe 中的所有东西，除了（给出的例子）NCage 的图像。你可以使用 jQuery 还是只使用 javascript？

不，这是一个 css/html 的东西。例如，如果我想要一个 chrome 扩展在 iframe 内的每个页面中插入一个菜单（这样它就不会弄乱它所在的网站）并且该菜单覆盖整个页面。如果我要单击 iframe 的中间（没有菜单），我仍然会单击 iframe 而不是它后面的东西。你不能用javascript有效地做到这一点。这将非常复杂，并且不适用于大多数网站。但是，如果您可以通过某种方式使 iframe 点击，则可以解决所有这些问题。这就是我要找的。​​span>

啊啊好抱歉，我没听懂！好吧，在这种情况下，我不知道您是否可以仅使用 CSS... 我使用 JS 得到它。在此示例中，您可以同时单击它们，但这有点棘手...jsfiddle.net/Kamae/e51zykkh 它只是使 iframe “z-index -1”，获取鼠标位置，触发点击，并使 iframe “z- index 0" 再次...这是我能做的，抱歉，如果这对你没有帮助。祝你好运！

【参考方案2】：

你试过了吗？

pointer-events: inherit;

我知道你已经得到了答案，但我认为这也可能有效。

【参考方案3】：

不要给整个 iframe pointer-events: none。就在 iframe 里面放一条 CSS 规则 body * pointer-events: none;

这样 iframe 不会阻塞事件，但是 iframe 内的元素不可点击。

【讨论】：

我们的目标是弄清楚当点击不在 iframe 内的某物上时，如何让点击穿透 iframe。您希望能够点击 iframe 内的内容，否则会破坏目的。

【参考方案4】：

您无法做到这一点，因为这将与点击劫持一起成为另一个安全问题。

iframe 中的样式与主机站点中的样式没有任何关系。因此，如果您甚至在 iframe 上设置 z-index/pointer-events 或其他内容，并尝试覆盖其中的规则，则它不会以任何方式应用于主机站点规则。

那么解决办法是什么？ 您必须将 iframe 拆分为多个 iframe，并修改它们的位置。

【参考方案5】：

我已经搜索了很多并自己想出了一个解决方法。

    // the iframe element
    const frame = document.getElementsByTagName("iframe")[0];
    frame.onload = function () 
      const frameDocument = frame.contentDocument;
      document.addEventListener("mousemove", onMouseMove, true);
      frameDocument.addEventListener("mousemove", onMouseMove, true);

      function onMouseMove(e) 
        let coord;
        if (e.currentTarget === document) 
          coord = 
            x: e.pageX - frame.offsetLeft,
            y: e.pageY - frame.offsetTop,
          ;
         else 
          coord =  x: e.clientX, y: e.clientY ;
        

        const el = frameDocument.elementFromPoint(coord.x, coord.y);
        // you can compare to your own element if needed
        frame.style.pointerEvents = !el || el === frameDocument.body ? "none" : "auto";
      
    ;

iframe 将自动切换其pointer-events，所有事件都可以无缝运行。