jQuery - Ereignisbindung für dynamisch erstellte Elemente von iframe

Question

Ich möchte einen onClick-Ereignishandler an jeden Anker innerhalb eines iFrame binden. Betrachten Sie den iFrame als IM/Chat-Client und daher sind die Ankerverknüpfungen bei der Iframe-Ladezeit nicht vorhanden. Ich habe keine Kontrolle über die iFrame-Quelle und daher können Anker keine Attribute festlegen.

Schätzen Sie, dass dieses Thema mehrmals diskutiert wurde, aber ich kann kein Beispiel mit einem iFrame finden, und hatte nach viel Lesen keinen Erfolg.

Ich verstehe, ich sollte .on() verwenden. Heres, was ich habe:

HTML:

<iframe src="https://...." scrolling="no" id="chatFrame"></iframe> 

JS:

// wait for frame to load 
$('#chatFrame').on('load', function(){ 

    $('#chatFrame').on('click', 'a', function(e){ 
     e.preventDefaults(e); 
     alert("link clicked!"); 
    }); 
}); 

ich keine Fehler, aber der Alarm ausgelöst wird, nicht auf Klick und der Link führt mich in einem neuen Fenster (wie erwartet Standardverhalten).

Kann jemand beraten, wie man an diese iFrame-Anker bindet?

Answer 1

Sie müssen in den Iframe mit contents() gehen. Ein iframe hat ein eigenes Fenster, so dass die Elemente in diesem Fenster nicht zugänglich sind, Dinge zu tun wie $('iframe a')

$('#chatFrame').on('load', function(){ 
    $(this).contents().find('body').on('click', 'a', function(e){ 
     e.preventDefault(e); 
     alert("link clicked!"); 
    }); 
}); 

Versuche Dies setzt auch voraus, dass der iframe auf derselben Domäne wie die Seite ist, oder Sie werden nicht in der Lage, darauf zuzugreifen