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

J'ai essayer de définir un événement en direct sur les balises img stocker 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 de l'iFrame, parce que je tiens à mettre une chose comme $('img').live("click",function().... mais uniquement 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

OriginalL'auteur sanceray3 | 2010-02-07

5

Vous pouvez le faire si vous
1. assurez-vous que la page dans l'iframe a sa propre copie de jQuery chargé [ed.: n'est vraiment nécessaire pour jQuery opérations internes à l'image de la page elle-même]
2. partir de l'extérieur de document, le travail dans l'iframe document comme ceci:
$('#iframeId').contents().find('img') //...

L'iframe n'a pas besoin de jquery dans de toute façon chargé. Si vous connaissez pas, merci de fournir un lien citant.
Il est plus important de noter que le document doit être sur le même domaine pour satisfaire la même origine: en.wikipedia.org/wiki/Same_origin_policy
Eh bien oui, vous avez probablement raison; quand j'étais en tapant que je pense à mon propre application, dans lequel le code dans cette sous-page a besoin pour faire son propre jQuery trucs aussi. Je ne sais pas combien de jQuery gère IE étrangeté autour de déplacement de données entre les pages, mais cela peut être difficile. Enfin, beaucoup de cadres à avoir des bugs dans leur canard en tapant le code, et de la croix-page les opérations échouent dans des moyens détournés, parfois probablement tous fixe maintenant.
JQuery exemple est fortement liée à son propriétaire le document, de nombreuses opérations échoue (ou, plus insidieusement, parfois-échec) lors de la tentative de script à partir d'un jQuery exemple dans un autre document. L'un des principaux problèmes est l'élément de création en utilisant le mauvais document. Juste les éléments dans un autre document est généralement OK, mais dès que vous obtenez plus compliqué, il est très facile de se retrouver avec beaucoup de confusion des erreurs.

OriginalL'auteur Pointy
3

Les autres solutions sont largement myope, que ce que vous essayez de faire est assez compliqué dans le javascript sous-jacentes.

Je suggérerais à l'aide de jquery contexte - et j'aimerais vous suggérons fortement d'attente pour l'iframe à charge totalement ou autre aucune de ces suggestions pourraient travailler de toute façon...
```
$("#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 de travail, SAUF si vous mettez à jour l'iframe ou de l'actualiser, dans ce cas, toutes les liaisons d'événements va échouer... et pire encore de la .vivre les événements ne semblent pas être pris en charge dans des iframes, du moins pas pour moi.

OriginalL'auteur
1
```
 $("iframe").contents().find("img")
```
Cela va cibler les images à l'intérieur de l'iFrame. Mais sachez que jquery ne traverse l'iFrame si elle n'est pas une violation du navigateur (ou jquery) de la croix-politique de site.

Cela signifie que si l'iframe est google.com, vous ne pouvez pas toucher l'intérieur DOM.

en.wikipedia.org/wiki/Same_origin_policy
N'ai-je pas mentionner que?

OriginalL'auteur Anthony
0

jQuery.bind() ne fonctionne pas avec des documents externes. Au moins en 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 de liste complète des images à l'heure actuelle, vous pouvez utiliser les événements de propagation:
```
$("iframe").contents().find("body").onclick = function() { //do your staff here };
```
Il travaillera événement avec des événements personnalisés:
```
$("iframe").contents().find("body").onmyevent = function() { //do your staff here };
```
Plus qu'une chose à retenir... contenu du bloc est chargé de manière asynchrone. Afin de lier vos gestionnaires d'APRÈS votre iframe contenu est chargé:
```
var $iframe = $("iframe"); 
$iframe.bind("load", null, funcion(e) {
    $iframe.contents().find("body").onclick = function() { //do your staff here }; 
});
```
Pour les cas les plus compliqués de gérer vos images clics à l'intérieur de l'iframe, et de déclencher vos événements personnalisés, que vous pourrez ensuite la poignée sur le corps. Surtout si vous avez totalement le contenu dynamique et souhaitez lier à "vivre" les événements à l'intérieur de l'iframe.

OriginalL'auteur Ghen
0

vous pouvez tirer de l'événement innner comme ceci:

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

puis maintenez événement comme celui-ci:
```
$('#dlg').bind('onTitle', function(){ alert(); });
```
OriginalL'auteur bfbd

cela a fonctionné pour moi. NB: assurez-vous que vous avez fait référence à la bibliothèque de jquery sur l'iframe page.

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

la version de jQuery?

OriginalL'auteur Given Nyauyanga

Vous devez vous connecter pour publier un commentaire.