node webkit- 从父窗口捕获 iframe 鼠标事件答案

【问题标题】：node webkit- catch iframe mouse events from parent windownode webkit- 从父窗口捕获 iframe 鼠标事件
【发布时间】：2015-06-13 09:22:18
【问题描述】：

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

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

【问题讨论】：

节点是javascript，但它不在客户端。它不知道 DOM 或鼠标事件，它只是将内容传递给客户端。所以，我要在这里冒昧地说这是不可能的。
不能像任何原生 GUI 应用程序那样与原生鼠标事件通信？
看起来不像。它确实使在 html 代码中包含节点模块变得容易，但这与节点知道鼠标事件不同。

标签： javascript node.js iframe node-webkit

【解决方案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>

【讨论】：

我试过了。问题是 bultin 事件，如悬停，不能由脚本触发。也许你可以使用 node webkit？
对不起，我误解了你的问题。我想我现在更好地理解它了。您希望能够在 iframe 不在焦点时拖动 iframe，并且在 iframe 在焦点时将事件传递到 iframe。对吗？
没有。同样，当 iframe 成为焦点时，我希望能够在他的父级中捕捉鼠标事件
好吧，您可以执行objIframe.contentWindow.document.writeln("Starting Drag...<br>"); 之类的操作来执行 iframe (found here) 内的一些代码。有什么办法让它像那样工作？
如果我正在监听Iframe.contentWindow.document 的鼠标事件，另一个脚本可以轻松取消它

【解决方案2】：

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

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

【讨论】：

问题是，如何从 iFrame 捕获所有鼠标事件，而不允许从那里取消捕获。如果我正在收听Iframe.contentWindow.document 的点击事件，另一个脚本可以轻松取消它

【解决方案3】：

据我所知，您最关心的情况是其他脚本取消了您的侦听器的执行（通过调用stopPropagation），但您可以完全避免这种情况。

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

启动捕获后，指定类型的所有事件将被在被分派给任何人之前分派给已注册的侦听器 DOM 树中它下方的 EventTarget。

【讨论】：