2015-04-08 7 views
10

Ich versuche, einen ziehbaren Iframe in meiner App zu erstellen. Wenn der Iframe fokussiert ist, werden alle Mausereignisse innerhalb des inneren Fensterobjekts ausgelöst.Knoten webkit- Iframe-Mausereignisse vom übergeordneten Fenster erfassen

  • ich innerhalb des iframe auf diese Ereignisse nicht hören können und sie selbst auslösen, weil es
  • js durch die iframe Inhalte blockiert werden kann ich nicht eine unsichtbare Schicht über dem iframe erstellen können, die alle fangen die Ereignisse und verschieben sie weiter zum iframe, weil bultin events nicht vom script ausgelöst werden können (wie css)
  • kann ich diese ereignisse in der knotenebene abfangen, ohne webkit DOM zu benutzen?
+0

Knoten ist Javascript, aber es ist nicht auf der Client-Seite. Es kennt die DOM- oder Mausereignisse nicht, es liefert nur Inhalt an den Client. Also, ich werde hier ein wenig aussteigen und sagen, dass es nicht möglich ist. – HeadCode

+0

Kann der Knoten nicht mit nativen Mausereignissen kommunizieren, wie eine native GUI-App? – yarden

+0

Es sieht nicht so aus. Es erleichtert zwar das Einbinden von Knotenmodulen in den HTML-Code, aber das ist anders als der Knoten, der über Mausereignisse weiß. – HeadCode

Antwort

1

Eine Idee, die ich habe, ist ein transparentes Element zu platzieren (wie ein div) vor Ihrem iframe und dann abfangen die klicken und Mausbewegungsereignisse dort um den iframe ziehen zu machen.

Ich habe es hier in dieser plunker getan.

Der Code, wie Sie unten sehen, ist gerade genug, um über diese Idee zu kommen und welche Schritte erforderlich sind, um den Iframe zu bewegen. Es hat einige Fehler (bewegen Sie Ihre Maus schnell), aber Sie könnten einige Dinge tun, um diese Probleme zu lösen.

<!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> 
+0

Ich habe es versucht. Das Problem ist, dass Bultin-Ereignisse, wie Hover, nicht vom Skript ausgelöst werden können. Vielleicht mit Node Webkit können Sie? – yarden

+0

Entschuldigung, ich habe Ihre Frage missverstanden. Ich denke ich verstehe es jetzt besser. Sie möchten den IFrame ziehen können, wenn ** ** nicht im Fokus ist, aber auch Ereignisse in den IFrame übertragen, wenn ** ** im Fokus ist. Ist das korrekt? – Chris

+0

Nein, auch wenn der Iframe im Fokus ist, möchte ich in der Lage sein, die Mausereignisse in seinem Eltern zu fangen – yarden

1

Sie könnten versuchen, eine einfache EventEmitter erstellen und auf Knotens global Objekt zu speichern. Da global in allen Knoten-Webkit-Kontexten zugänglich ist, könnte der Iframe es zu Dinge verwenden, über die das Elternfenster informiert werden soll, und die Eltern können es ebenfalls zu Ereignissen verwenden, die die iframe möglicherweise wissen möchten.

Ist das eine Lösung, die für Sie arbeiten könnte?

+0

Die Frage ist, wie kann ich alle Mausereignisse aus dem iFrame abfangen, ohne das Abfangen von dort abzubrechen. Wenn ich ein Klickereignis von 'Iframe.contentWindow.document' abhöre, kann ein anderes Skript es leicht abbrechen – yarden

1

Von dem, was ich sehe, sind Sie am meisten besorgt über eine Situation, wenn ein anderes Skript die Ausführung Ihres Listeners (durch Aufruf stopPropagation) bricht, aber Sie können eine solche Situation ganz verhindern.

addEventListener(type, listener [, useCapture]) ermöglicht ein useCapture Argument zu übergeben, das standardmäßig false ist. Wenn Sie es true dann eingestellt sind Sie sicher:

Nach der Aufnahme initiiert, wird alle Ereignisse des angegebenen Typs den registrierten Hörer geschickt werden, bevor darunter im DOM-Baum zu jedem Eventtarget geschickt wird.

Verwandte Themen