Question

我正在尝试在我的应用中创建一个可拖动的iframe。当iframe被聚焦时，所有鼠标事件都在内部窗口对象中触发。

我无法在iframe中收听这些事件并自行触发，因为它可以被iframe内容js阻止
我无法在iframe上方创建一个不可见的图层来捕获所有事件并将它们转发到iframe，因为bultin事件不能由脚本触发（如css hover）
我可以在不使用webkit DOM的情况下在Node层中捕获这些事件吗？

Answer 1

我的一个想法是在 iframe 前放置一个透明元素（如 div ），然后拦截那里的点击和鼠标移动事件， iframe拖了一圈。

我已经在plunker这里完成了。

如下所示，代码足以让我们了解这个想法以及让iframe移动所需的步骤。它有一些缺陷（快速移动鼠标）但你可以做一些事情来解决这些问题。

<!DOCTYPE html>
<html>

  <head>
    <style>
      iframe, div {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 200px;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <iframe id="iframe" src="if.html"></iframe>
    <div id="div" onmousedown="startDrag(event)" onmouseup="stopDrag()" onmousemove="moveDrag(event)"></div>
  </body>


  <script>
    var objDiv = document.getElementById("div");
    var objDivCoordinates = {left: 20, top: 20};
    var objIframe = document.getElementById("iframe");
    var mouseX = null;
    var mouseY = null;
    var dragging = false;

    function startDrag(e) {
      mouseX = e.clientX;
      mouseY = e.clientY;
      dragging = true;
      objIframe.contentWindow.document.writeln("Starting Drag...<br>");
    }
    function moveDrag(e) {
      if(!dragging) return;

      var changeX = mouseX - e.clientX;
      var changeY = mouseY - e.clientY;

      objDivCoordinates.left -= changeX;
      objDivCoordinates.top -= changeY;
      objDiv.style.left = objDivCoordinates.left+"px";
      objDiv.style.top = objDivCoordinates.top+"px";
      objIframe.style.left = objDiv.style.left;
      objIframe.style.top = objDiv.style.top;

      mouseX = e.clientX;
      mouseY = e.clientY;
    }
    function stopDrag(e) {
      dragging = false;
    }
  </script>
</html>

Answer 2

您可以尝试创建普通EventEmitter并将其存储在节点的global对象上。由于global可在所有node-webkit上下文中访问，因此iframe可以将其用于emit它希望父窗口了解的内容，并且父级也可以将其用于emit iframe可能想知道的事件。

这是一个可能适合您的解决方案吗？

Answer 3

从我看到你最关心的情况是当其他一些脚本取消执行你的监听器时（通过调用stopPropagation），你可以完全防止这种情况。

addEventListener(type, listener [, useCapture])允许传递useCapture参数，默认为false。如果您将其设置为true，那么您就安全了：

启动捕获后，指定类型的所有事件都将成为在被派遣到任何人之前派遣到注册的听众 DOM树下面的EventTarget。

节点webkit-从父窗口捕获iframe鼠标事件

3 个答案: