javascript – node webkit – 从父窗口捕获iframe鼠标事件

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

>我不能听iframe内的这些事件并自动触发它们,因为它可以被iframe内容js阻止
>我不能在iframe上面创建一个不可见的层,它将捕获所有的事件并将它们转移到iframe,因为batin事件不能被脚本触发(如css hover)
>我可以在Node层中捕获这些事件,而不使用webkit DOM吗？

解决方法

我有一个想法是将一个透明元素(如div)放在你的iframe前面,然后拦截点击和鼠标移动事件,使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>

javascript – node webkit – 从父窗口捕获iframe鼠标事件

解决方法

猜你在找的JavaScript相关文章