web-dev-qa-db-fra.com

Comment ajouter un événement de clic à un iframe avec JQuery

J'ai un iframe sur une page, provenant d'un tiers (une annonce). Je souhaite déclencher un événement de clic lorsque l'utilisateur clique sur l'iframe (pour enregistrer des statistiques internes). Quelque chose comme:

$('#iframe_id').click(function() {
    //run function that records clicks
});

..basé sur HTML de:

<iframe id="iframe_id" src="http://something.com"></iframe>

Je n'arrive pas à obtenir une variation de ce travail. Pensées?

jqueryiframeonclick
50
Justin Lucente

Il n'y a pas d'événement 'onclick' pour un iframe, mais vous pouvez essayer d'attraper l'événement click du document dans l'iframe:

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

EDIT Bien que cela ne résolve pas votre problème de cross site, FYI jQuery a été mis à jour pour fonctionner correctement avec les iFrames:

$('#iframe_id').on('click', function(event) { });

Mise à jour 1/2015 Le lien vers l'explication iframe a été supprimé car il n'était plus disponible.

Note Le code ci-dessus ne fonctionnera pas si l'iframe provient d'un domaine différent de celui de la page de l'hôte. Vous pouvez toujours essayer d'utiliser les hacks mentionnés dans les commentaires.

37
Traveling Tech Guy

Essayez d’utiliser ceci: iframeTracker jQuery Plugin , comme ça:

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when iframe is clicked (like firing an XHR request)
        }
    });
});
16
Vince

J'essayais de trouver une meilleure réponse plus autonome. J'ai donc commencé à réfléchir à la manière dont JQuery organise les événements et les événements personnalisés. Comme click (de JQuery) concerne n'importe quel événement, je pensais que tout ce que j'avais à faire, c'était de le déclencher étant donné que le contenu de l'iframe avait été cliqué. Donc c'était ma solution

$(document).ready(function () {
    $("iframe").each(function () {
        //Using closures to capture each one
        var iframe = $(this);
        iframe.on("load", function () { //Make sure it is fully loaded
            iframe.contents().click(function (event) {
                iframe.trigger("click");
            });
        });

        iframe.click(function () {
            //Handle what you need it to do
        });
    });
});
13
Kevin

Cela ne fonctionne que si le cadre contient des pages du même domaine (ne viole pas la politique de même origine)

Regarde ça:

var iframe = $('#your_iframe').contents();

iframe.find('your_clicable_item').click(function(event){
   console.log('work fine');
});
7
Jhonatan S. Souza

Vous pouvez simuler un événement focus/click en procédant comme suit. (adapté de l'événement $ (fenêtre) .blur affectant Iframe )

$(window).blur(function () {
  // check focus
  if ($('iframe').is(':focus')) {
    console.log("iframe focused");
    $(document.activeElement).trigger("focus");// Could trigger click event instead
  }
  else {
    console.log("iframe unfocused");
  }                
});

//Test
$('#iframe_id').on('focus', function(e){
  console.log(e);
  console.log("hello im focused");
})
4
Justin Fenn

Aucune des réponses suggérées n'a fonctionné pour moi. J'ai résolu un cas similaire de la manière suivante:

<a href="http://my-target-url.com" id="iframe-wrapper"></a>
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe>

Le css (bien sûr, le positionnement exact devrait changer en fonction des exigences de l'application):

#iframe-wrapper, iframe#iframe_id {
  width: 162px;
  border: none;
  height: 21px;
  position: absolute;
  top: 3px;
  left: 398px;
}
#alerts-wrapper {
  z-index: 1000;
}

Bien sûr, vous pouvez maintenant capturer n’importe quel événement sur l’iframe-wrapper.

1
ramigg

Vous pouvez utiliser ce code pour lier cliquer sur un élément situé dans iframe.

jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){  
        console.log("triggered !!")
});
1
mst