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

我试图在我的应用程序中创build一个可拖动的iframe。 当iframe被聚焦时,所有的鼠标事件都在内部窗口对象内被触发。

  • 我不能听iframe中的这些事件,并自己触发它们,因为它可以被iframe内容js阻止
  • 我不能在iframe上创build一个不可见的层,它将捕获所有的事件,并将其移动到iframe,因为bultin事件不能被脚本触发(如css hover
  • 我可以在Node层捕获这些事件,而不使用webkit DOM?

我的一个想法是在你的iframe前放置一个透明的元素(比如div ),然后在那里拦截点击和鼠标移动事件,使iframe拖拽。

在这里,我是这样做的。

代码,正如你在下面看到的,就足以贯穿这个想法,并且需要什么步骤来获得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> 

您可以尝试创build一个简单的EventEmitter并将其存储在节点的global对象上。 由于global可以在所有node-webkit上下文中访问,因此iframe可以使用它emit想要父窗口知道的事情,并且父级可以使用它来emit iframe可能想知道的事件。

这是一个可以为你工作的解决scheme吗?

从我看到的你最关心的情况出现时,其他一些脚本取消了你的监听stopPropagation执行(通过调用stopPropagation ),但是你可以完全防止这种情况。

addEventListener(type, listener [, useCapture])允许传递一个useCapture参数,默认为false 。 如果你把它设置为true那么你是安全的:

启动捕获后,指定types的所有事件将被分派到注册的侦听器,然后被分派到DOM树下的任何EventTarget。