Désactiver tous les liens à L'intérieur D'IFRAME en utilisant jQuery
je veux désactiver tous les liens à l'intérieur D'une IFRAME, quand les gens cliquent sur ces liens, l'alerte apparaîtrait.
voici ce que j'ai jusqu'à présent, mais le jQuery ne fait rien. Pas sûr de ce que j'ai fait de mal.
<iframe id='templateframe' name='templateframe' src="templates/template<?php echo $templateID; ?>/login.html"></iframe>
$(document).ready(function(){
$('#templateframe').contents().find('a').click(function(event) {
alert("demo only");
event.preventDefault();
});
});
Merci d'avance.
9 réponses
ou bien vous pouvez mettre le script dans l'iframe lui-même et donc raccourcir le code de cette façon. Il en fait un briquet de la performance, je crois.
$(document).ready(function(){
$('a').click(function(event) {
alert("demo only");
event.preventDefault();
});
});
je m'attends à ce que $(document).ready exécute avant que le contenu de l'iframe est chargé. Essayez d'utiliser le onload attribut pour l'iframe à la place.
je suis à la recherche pour désactiver iframe trop de liens et ne pouvais pas trouver une solution. Grâce à HTML5, vous pouvez facilement désactiver les liens en ajoutant simplement le sandbox l'attribut.
<iframe src="externalsite.com" sandbox></iframe>
j'espère que cela aidera quelqu'un à faire une recherche sur le net, d'autant plus que ces questions apparaissent en premier sur Google.
la solution mentionnée par "lol" fonctionne en fait assez bien. Je suis tombé dessus accidentellement après avoir travaillé dessus pendant quelques heures...
mettez votre iframe dans un élément div, puis rendez le div transparent et poussez l'index z de l'iframe derrière le div. Voir cet exemple:
<div class="container">
<iframe class="lockframe" src="www.google.com"></iframe>
</div>
Alors vos css comme ceci:
div.container { background: transparent; }
div.lockframe { z-index: -2; }
Chargez votre page et le div est ce qui acceptera les événements de clic, pas l'iframe.
Une légende sur
http://www.webdeveloper.com/forum/showthread.php?182260-Can-we-disable-links-inside-iframes
a ranimé une technique du bon vieux temps, quand nous n'avions pas d'appels comme -webkit-gradient().
il suffit de mettre une div transparente dessus!
aucune des réponses ci-dessus ne fonctionnera à moins que vous ne chargiez le contenu localement parce que d'ici la fenêtre.l'événement de charge déclenche l'iframe n'a pas encore typiquement chargé. Vous pouvez ajouter un écouteur à l'iframe pour trouver tous les a à l'intérieur de l'iframe et les désactiver.
$("iframe").load(function() {
$("iframe").contents().find("a").each(function(index) {
$(this).on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
});
});
C'est la solution générique de votre problème. Espérons que cela va bien fonctionner.
$(window).load(function(){
$('#templateframe').contents().find('a').click(function(event) {
alert("demo only");
event.preventDefault();
});
});
je pense qu'aucune des solutions proposées (autre que le bac à sable html5) ne fonctionnera si vous n'avez pas défini Access-Control-Allow-Origin sur le serveur source. Pour résoudre ce problème, dans certains cas, on peut utiliser un serveur mandataire, récupérer le contenu de la page sur un autre serveur, analyser le code html, se débarrasser des liens, et retourner le résultat au navigateur du client.
comme alternative à la prévention des défauts, vous pouvez changer les ancrages en portées de sorte qu'il soit plus visible que le lien n'est plus le lien.
$('#templateframe').contents().find('a').each(function() {
$(this).replaceWith($('<span>' + this.innerHTML + '</span>'));
});