13

Wie kann ich ein Klick- oder mousedown-Ereignis auf einem div, das einen iframe umgibt, erfassen. Ich habe versucht, die Funktion an click-Ereignis auf dem div anzuhängen, aber da der iframe nie das Ereignis bis zum umgebenden div sprudelt, wird die Funktion nie genannt. Gibt es eine Möglichkeit, ich kann das Ereignis auf der Div erfassen und dann an den Iframe für Standardaktion propagierencapture klicken auf div um einen iframe

Antwort

10

Wenn der Klick im Iframe-Bereich ist, behandelt der Iframe-Kontext das Click-Ereignis, es sprudelt nicht bis zum Iframe-Elternteil. Das div registriert das click-Ereignis also nie, wenn es im Iframe-Bereich passiert ist.

Wenn der Iframe eine Seite enthält, die nicht zur selben Domäne wie der Iframe-Elternteil gehört, ist jegliche Interaktion verboten (re. same origin policy).

Wenn die same origin policy erfüllt ist, gibt es ein paar Dinge, die Sie tun können, Sie ein Verfahren, in dem iframe Elternkontext nennen könnte:

top.parentFunction(); 

So in der iframe Sie einen Ereignis-Listener hinzufügen, die die Delegierten Iframe Eltern (zugänglich mit der top Referenz.

Die Übertragung von Ereignissen ist viel komplizierter, so werde ich einfach auf Diego Perini's NWEvents library beziehen. Ich glaube, dass sein Event-System einer der besseren draußen und er ist besonders auf Iframe-Interaktion

Ich würde sicherlich nicht beginnen, Ihren eigenen Code zu schreiben, um dies zu erreichen, dies kann leicht ein Jahr lang Projekt sein, wenn Sie es richtig machen wollen und selbst dann Diego Arbeiten unterlegen sein wird.

+0

Das Aufrufen von Funktionen auf Eltern- oder Vorfahren-Frames ist nicht erlaubt (heutzutage), also wird das leider nicht mehr funktionieren. Als Randnotiz gibt es "window.parent" (Elternrahmen) und "window.top" (immer der "oberste" Rahmen, d. H. Die Seite, die der Benutzer im Browser geöffnet hat). – codener

6

Es gibt keine "gute" Möglichkeit, es zu tun, aber wenn Sie wirklich einen Klick auf einen Iframe erkennen müssen, können Sie es in den neuesten Browsern tun.

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

Dieses Skript prüft alle 200 ms, ob der Benutzer im Iframe ist. Natürlich haben sie vielleicht nicht auf den Iframe geklickt, um dorthin zu gelangen, aber ich fürchte, das ist das Beste, was Sie ohne @ BGerrissens Lösung tun können.

Es wird nur das erste "Klicken" erkannt, es sei denn, Sie klicken erneut auf. Es funktioniert nur in wirklich modernen Browsern.

+0

Arbeitete wie ein Charme für iPhone –

+1

Ich versuchte zu erkennen, klicken Sie auf eine soziale Freigabe-Taste (die Iframe ist), machte eine winzig winklige Direktive aus dieser Methode und wow, es hat perfekt funktioniert! Vielen Dank! –

0

Sie können eine Bibliothek wie porthole verwenden, um Nachrichten zwischen Parent und iframe auch über Domänen hinweg zu übergeben. Wenn Sie dies verwenden, wird das Ereignis nicht genau weitergegeben (Sie können das Ereignisobjekt nicht abrufen). Sie können jedoch ein eigenes Ereignis in Form einer einfachen Nachricht erstellen und es dann im übergeordneten Element als Klick behandeln.

Here's their example

Allerdings habe ich Brendon Antwort verwendet, da es für meine aktuellen Bedarf einfachere Arbeiten ist.