节点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。