Deshabilitar todos los enlaces dentro de IFRAME usando jQuery

Question

Quiero desactivar todos los enlaces dentro de un IFRAME, cuando las personas hacen clic en esos enlaces, la alerta se abrirá.

Esto es lo que tengo hasta ahora, pero el jQuery no hace nada. No estoy seguro de lo que hice 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(); 

     }); 
}); 

Gracias de antemano.

Answer 1

De lo contrario, podría colocar la secuencia de comandos dentro del propio iframe y acortar así el código. Lo hace un rendimiento más ligero, creo.

$(document).ready(function(){  
    $('a').click(function(event) { 
     alert("demo only"); 
     event.preventDefault(); 
    }); 
}); 

Answer 2

Espero que $(document).ready se ejecute antes de que se cargue el contenido del iframe. Intente utilizar el atributo onload para el iframe en su lugar.

Answer 3

Esta es la solución genérica de su problema. Espero que esto funcione bien.

$(window).load(function(){ 
    $('#templateframe').contents().find('a').click(function(event) { 
     alert("demo only"); 
     event.preventDefault(); 
    }); 
}); 

Answer 4

Como alternativa a la prevención de valores predeterminados, puede cambiar los anclajes a tramos para que sea más visible que el enlace ya no es un enlace.

$('#templateframe').contents().find('a').each(function() { 
    $(this).replaceWith($('<span>' + this.innerHTML + '</span>')); 
}); 

Answer 5

Ninguna de las respuestas anteriores funcionará a menos que tal vez usted está cargando el contenido localmente porque en el momento del evento window.load dispara el iframe no ha normalmente cargado todavía. Puede agregar un oyente al iframe para encontrar todas las a dentro del iframe y deshabilitarlas.

$("iframe").load(function() { 
    $("iframe").contents().find("a").each(function(index) { 
     $(this).on("click", function(event) { 
      event.preventDefault(); 
      event.stopPropagation(); 
     }); 
    }); 
}); 

Answer 6

Una leyenda encima en

http://www.webdeveloper.com/forum/showthread.php?182260-Can-we-disable-links-inside-iframes

revivió una técnica de los viejos tiempos, en la época no teníamos llamadas como webkit-gradiente() y los hombres eran hombres.

¡Solo ponga una div transparente sobre ella!

Answer 7

La solución mencionada por "lol" en realidad funciona bastante bien. Me tropecé con esto accidentalmente después de trabajar en esto por un par de horas ...

Ponga su iframe dentro de un elemento div, luego haga transparente el div y presione el índice z del iframe detrás del div. Vea este ejemplo:

<div class="container"> 
    <iframe class="lockframe" src="www.google.com"></iframe> 
</div> 

A continuación, configurar su css de esta manera:

div.container { background: transparent; } 
div.lockframe { z-index: -2; } 

de carga hasta su página y el div es lo que va a aceptar los eventos de clic, no el iframe.

Answer 8

Estaba buscando para deshabilitar iframe enlaces también y no pude encontrar una solución. Gracias a HTML5, puede deshabilitar enlaces fácilmente simplemente agregando el atributo sandbox.

<iframe src="externalsite.com" sandbox></iframe> 

view demo

espero que esto ayude a alguien buscando en la red, sobre todo porque esta pregunta aparece primero en Google.

Answer 9

Creo que ninguna de las soluciones propuestas (aparte del html5 sandbox) funcionará si no ha configurado Access-Control-Allow-Origin en el servidor de origen. Para resolver este problema, en algunos casos se puede usar un servidor proxy, recuperar el contenido de la página en otro servidor, analizar el código html, deshacerse de los enlaces y devolver el resultado al navegador del cliente.