Question

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

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

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

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

以下是一个简单示例：jsfiddle.net/MarcGuiselin/yLo119sw/2

Answer 1

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

编辑：如果您想在pointer-events: none;之外的任何地方div进行操作，则可以在每个pointer-events而不是element中添加iframe 。根据你在小提琴中的例子，如果你想保存尼古拉斯凯奇但阻止其他事件，你可以这样做：

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

就可以更快地完成

Answer 2

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

iframe内的样式与宿主网站内的样式没有任何配合。因此，即使您甚至在iframe上设置z-index / pointer-events或其他内容，并尝试覆盖其中的规则，也不会以任何方式应用于宿主网站规则。

那是什么解决方案？您必须将iframe拆分为多个，并修改其位置。

Answer 3

我进行了很多搜索，自己找到了解决方法。

    // 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，所有事件都将无缝运行。

Answer 4

不要给整个iframe pointer-events: none。就在iframe内部放置了CSS规则body * { pointer-events: none;}

这样iframe不会阻止事件，但iframe中的元素不可点击。

Answer 5

你试过这个吗？

pointer-events: inherit;

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

如何使iframe具有指针事件：无;但不是在里面的div？

5 个答案: