13

Come posso catturare un evento click o mouse su un div che circonda un iframe. Ho provato ad associare la funzione per fare clic sull'evento sul div, ma poiché l'iframe non fa mai scoppiare l'evento fino al div circostante, la funzione non viene mai chiamata. C'è un modo in cui posso catturare l'evento sul div e quindi propagarlo all'iframe per l'azione predefinitacattura fare clic su div che circonda un iframe

risposta

10

Se il clic è nell'area iframe, il contesto iframe gestisce l'evento click, esso non è in bolla genitore iframe. Quindi il div non registrerà mai l'evento click se si è verificato nell'area iframe.

Inoltre, se l'iframe contiene una pagina che non appartiene allo stesso dominio del genitore iframe, è vietata qualsiasi interazione (riferimento same origin policy).

Quando il same origin policy è soddisfatta, ci sono alcune cose che puoi fare, si può chiamare un metodo nel contesto iframe genitore:

top.parentFunction(); 

Così nel iframe si aggiunge un listener di eventi che i delegati al genitore iframe (accessibile con il riferimento top.

Gli eventi di propagazione sono molto più complicati, quindi mi riferirò semplicemente a Diego Perini's NWEvents library. Credo che il suo sistema di eventi sia uno dei migliori là fuori e che sia particolare su interazione iframe

Io sicuramente non inizierei a scrivere il tuo codice per raggiungere questo obiettivo, questo può facilmente essere un progetto di un anno se vuoi farlo correttamente e anche allora sarà inferiore al lavoro di Diego.

+0

La chiamata alle funzioni su frame padre o antenato non è consentita (al giorno d'oggi), quindi purtroppo non funzionerà (più). Come nota a margine, ci sono 'window.parent' (frame padre) e' window.top' (sempre il frame "in alto", cioè la pagina che l'utente ha aperto nel browser). – codener

6

Non esiste un "buon" modo per farlo, ma se hai davvero bisogno di rilevare un clic su un Iframe, puoi farlo tranquillamente negli ultimi browser.

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe> 

<script type="text/javascript"> 
var inIframe = false; 
function checkClick() { 
    if (document.activeElement 
     && document.activeElement === document.getElementById("iframe")) { 
     if (inIframe == false) { 
      alert("iframe click"); 
      inIframe = true; 
     } 
    } else 
     inIframe = false; 
} 
setInterval(checkClick, 200); 
</script> 

Questo script controlla ogni 200 ms se l'utente si trova nell'Iframe. Ovviamente, potrebbero non aver cliccato sullo Iframe per arrivarci, ma temo che questo sia il meglio che puoi fare senza la soluzione di @Berrerren.

Rileverà solo il primo "clic", a meno che non si faccia di nuovo clic. Funziona solo con browser molto moderni.

+0

Ha funzionato come un fascino per iPhone –

+1

Stavo cercando di rilevare il clic su un pulsante di condivisione sociale (che è iframe), ha fatto una piccola direttiva angolare fuori da questo metodo e wow, ha funzionato perfettamente! Grazie! –

0

È possibile utilizzare una libreria come porthole per passare i messaggi tra padre e iframe, anche tra domini. L'utilizzo di questo non propagerebbe esattamente l'evento (non sarà possibile ottenere l'oggetto evento), ma è possibile creare il proprio evento sotto forma di un semplice messaggio, quindi gestirlo nel genitore come un clic.

Here's their example

Tuttavia, ho usato la risposta di Brendon come è lavori più semplici per il mio bisogno di corrente.

Problemi correlati