Ajouter un événement de clic à iframe

Je souhaite ajouter un événement de clic à un iframe . J'ai utilisé cet exemple et obtenu ceci:

 $(document).ready(function () { $('#left').bind('click', function(event) { alert('test'); }); }); <iframe src="left.html" id="left"> </iframe> 

Mais malheureusement, rien ne se passe.
Lorsque je le teste avec un autre élément (par exemple, un bouton), cela fonctionne:

 <input type="button" id="left" value="test"> 

Vous pouvez attacher le clic au contenu iframe:

 $('iframe').load(function(){ $(this).contents().find("body").on('click', function(event) { alert('test'); }); }); 

Remarque: cela ne fonctionnera que si les deux pages sont dans le même domaine.

Démo en direct: http://jsfiddle.net/4HQc4/

Deux solutions:

  1. Utilisation :after un élément .iframeWrapper
  2. Utilisation de pointer-events:none; Un l'iframe

1. Utilisation :after

Assez simple. L'enveloppe de l'iframe a un pseudo élément :after (transparent) avec un index z supérieur qui aidera l'enveloppe à enregistrer le clic:

 jQuery(function ($) { // DOM ready $('.iframeWrapper').on('click', function(e) { e.preventDefault(); alert('test'); }); }); 
 .iframeWrapper{ display:inline-block; position:relative; } .iframeWrapper:after{ /* I have higher Z-index so I can catch the click! Yey */ content:""; position:absolute; z-index:1; width:100%; height:100%; left:0; top:0; } .iframeWrapper iframe{ vertical-align:top; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="iframeWrapper"> <iframe src="http://www.reuters.tv/" frameBorder="0"></iframe> </div> 

Je l'ai fait fonctionner, mais seulement après l'avoir téléchargé chez un hôte. J'imagine que localhost fonctionnerait bien aussi.

extérieur

 <html> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).ready(function() { var myFrame = document.getElementById("myFrame"); $(myFrame.contentWindow.document).find("div").on("click", function () { alert("clicked"); }); }); </script> <body> <iframe id="myFrame" src="inner.htm"></iframe> </body> </html> 

interne

 <html> <head> <style> div { padding:2px; border:1px solid black; display:inline-block; } </style> </head> <body> <div>Click Me</div> </body> </html> 
 $(document).ready(function () { $('#left').click(function(event) { alert('test'); }); }); <iframe src="left.html" id="left">Your Browser Does Not Support iframes</iframe> 

Le script devrait être entièrement fonction de l'iframe. Je recommanderais une méthode différente pour appeler du contenu, tel que php.

Les iframes ne valent pas vraiment les tracas.

Le problème réel est que, l'événement de clic ne se lie pas au DOM de l'iframe et bind () est obsolète, utilisez .on() pour lier l'événement. Essayez avec les codes suivants et vous trouverez les limites de l'iframe qui peut être cliquable pour obtenir cette alerte.

 $('#left').on('click', function(event) { alert('test'); }); 

Démonstration de ce problème

Alors, comment procéder?

Comment faire, créez une fonction sur la page iframe et appelez cette fonction à partir de cette page iframe.