Définir un événement sur l'élément iFrame avec jQuery

Question

J'essaie de définir un événement en direct sur le magasin de balises img sur un iFrame. Par exemple, je voudrais obtenir une simple boîte d'alerte javascript lorsque je clique sur une image sur mon iFrame. Savez-vous comment je peux définir les événements pour l'iFrame, parce que je voudrais mettre une chose comme $('img').live("click",function() .... mais seulement pour les éléments sur iFrame.

Veuillez noter: Les balises img sont ajoutées dynamiquement sur mon iFrame après chargement de la page.

Merci pour votre aide.

Nicolas

Answer 1

Vous pouvez le faire si vous

1. assurez-vous que la page dans le iframe a sa propre copie de jQuery chargé [ed .: ne vraiment nécessaire pour les opérations jQuery internes au la page de cadre lui-même]
2. du document externe, le travail dans le document iframe comme ceci:

$('#iframeId').contents().find('img') // ...

Answer 2

Cela cible les images dans le iFrame. Mais sachez que jquery ne traversera le iFrame que si cela ne constitue pas une violation de la politique intersite du navigateur (ou de jquery).

Cela signifie que si l'iframe est google.com, vous ne pouvez pas toucher le DOM interne.

Answer 3

Les autres solutions ici sont en grande partie myopes, car ce que vous essayez de faire est assez compliqué dans le javascript sous-jacent.

Je suggère d'utiliser le contexte jquery aussi bien - et je suggère fortement en attendant l'iframe pour charger totalement ou bien aucune des suggestions précédentes pourrait travailler quand même ...

$("#frame").ready(function() { //wait for the frame to load 

    $('img', frames['frame'].document).bind("click",function(){ 
    alert('I clicked this img!'); 
    }); 

}); 

Cela devrait généralement travaillez SAUF si vous mettez à jour l'iframe ou l'actualisez, auquel cas toutes les liaisons d'événements échoueront ... et pire encore, les événements .live ne semblent pas être pris en charge dans les iframes - du moins pas pour moi.

Answer 4

jQuery.bind() ne fonctionne pas avec les documents externes. Au moins dans jQuery 1.6.2.

Cependant, vous pouvez lier à des événements DOM:

$("iframe").contents().find("img").onclick = function() { // do your staff here }; 

Si vous n'avez pas la liste complète des images pour le moment, vous pouvez utiliser des événements propogation:

$("iframe").contents().find("body").onclick = function() { // do your staff here }; 

Il fonctionnera événement événements personnalisés:

$("iframe").contents().find("body").onmyevent = function() { // do your staff here }; 

Encore une chose à retenir ... le contenu du cadre est chargé de manière asynchrone.Donc, lier vos gestionnaires APRÈS votre contenu iframe est chargé:

var $iframe = $("iframe"); 
$iframe.bind("load", null, funcion(e) { 
    $iframe.contents().find("body").onclick = function() { // do your staff here }; 
}); 

Pour les cas plus compliqués gérer vos images à l'intérieur iframe clics, et de déclencher vos événements personnalisés que vous pouvez gérer plus tard au niveau du corps. Surtout si vous avez un contenu totalement dynamique et que vous voulez vous lier aux événements 'live' dans iframe.

Answer 5

cela a fonctionné pour moi. NB: assurez-vous de bien référencer la bibliothèque jquery sur la page iframe.

$(document).ready(function(){ 
    $('#iframeid').load(function(){ //make sure that all elements finish loading 
      $('#iframeid').contents().find('img').live({ 
       click: function(){ 
        alert('clicked img'); 
       } 
      }); 
     }); 
    }); 

Answer 6

vous pouvez tirer événement innner comme ceci:

parent.$('#dlg').trigger('onTitle');

puis tenir l'événement comme celui-ci:

$('#dlg').bind('onTitle', function(){ alert(); });