2015-04-08 17 views
10

Sto provando a creare un iframe trascinabile nella mia app. Quando l'iframe è focalizzato, tutti gli eventi del mouse vengono attivati ​​all'interno dell'oggetto della finestra interna.nodo webkit- cattura gli eventi del mouse iframe dalla finestra principale

  • non posso ascoltare a quegli eventi all'interno del iframe e innescare io stesso, perché può essere bloccato dal contenuto iframe js
  • Non riesco a creare uno strato unvisible sopra l'iframe che cattura tutto gli eventi e spostarli in avanti verso l'iframe, perché gli eventi bultin non possono essere attivati ​​dallo script (come css hover)
  • posso prendere quegli eventi nel livello Nodo, senza usare il DOM del webkit?
+0

Il nodo è javascript, ma non è sul lato client. Non conosce gli eventi del DOM o del mouse, ma fornisce solo contenuti al client. Quindi, ho intenzione di uscire su un arto qui e dire che non è possibile. – HeadCode

+0

Il nodo non può comunicare con eventi mouse nativi, come qualsiasi app GUI nativa? – yarden

+0

Non sembra. Semplifica l'inclusione dei moduli nodo nel codice html, ma è diverso dal conoscere il nodo degli eventi del mouse. – HeadCode

risposta

1

Un'idea che ho è quello di mettere un elemento trasparente (come un div) davanti al iframe e quindi intercettare gli eventi fare clic e spostare il mouse lì per fare la resistenza iframe intorno.

Ho fatto così qui in questo plunker.

Il codice, come si vede di seguito, è appena sufficiente per superare questa idea e quali passaggi sono necessari per ottenere il iframe di muoversi. Ha alcuni difetti (sposta il mouse velocemente) ma potresti fare alcune cose per risolvere quei problemi.

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

L'ho provato. Il prblem è che gli eventi bultin, come hover, non possono essere attivati ​​da script. Forse con il nodo webkit puoi? – yarden

+0

Scusa, ho frainteso la tua domanda. Penso di capirlo meglio ora. Vuoi essere in grado di trascinare l'iframe quando ** non è ** a fuoco, ma anche avere eventi consegnati nell'iframe quando ** è ** a fuoco. È corretto? – Chris

+0

No. anche quando l'iframe è a fuoco, voglio essere in grado di catturare gli eventi del mouse nel suo genitore – yarden

1

Si potrebbe provare a creare un semplice EventEmitter e la memorizzazione su global oggetto del nodo. Poiché global è accessibile in tutti i contesti nodo-webkit, l'iframe potrebbe utilizzarlo per le informazioni su emit e la genitore può anche utilizzarlo per gli eventi emit di cui è possibile sapere l'informazione iframe.

È una soluzione che potrebbe funzionare per voi?

+0

La domanda è, come posso catturare tutti gli eventi del mouse dall'iFrame, senza consentire di annullare l'acquisizione da lì. Se sto ascoltando un evento click di "Iframe.contentWindow.document', un altro script può cancellarlo facilmente – yarden

1

Da quello che vedo sei più preoccupato di una situazione in cui un altro script annulla l'esecuzione del tuo ascoltatore (chiamando lo stopPropagation), ma puoi evitare del tutto questa situazione.

addEventListener(type, listener [, useCapture]) consente di passare un argomento useCapture, che per impostazione predefinita è false. Se si imposta a true allora siete al sicuro:

Dopo aver iniziato la cattura, tutti gli eventi del tipo specificato saranno spedito per l'ascoltatore registrato prima di essere spedito a qualsiasi EventTarget sotto di esso nella struttura DOM.

Problemi correlati