2011-08-24 63 views
36

quiero cargar un iframe en tecleo, esto es lo que tengo hasta ahora:¿Cómo se carga una URL en iframe con jQuery

$("#frame").click(function() { 
     $('this').load("http://www.google.com/"); 
    }); 

No funciona. Este es el código completo: JS Bin

+1

¿Realmente tiene que utilizar marcos flotantes? Estoy seguro de que alguien te ayudará a hacer esto, pero debes evitar los iframes tanto como puedas. –

+0

http://stackoverflow.com/questions/362730/are-iframes-considered-bad-practice/362743#362743 –

+0

Realmente necesito usar iframes :) – Youss

Respuesta

81
$("#button").click(function() { 
    $("#frame").attr("src", "http://www.example.com/"); 
}); 

HTML:

<div id="mydiv"> 
    <iframe id="frame" src="" width="100%" height="300"> 
    </iframe> 
</div> 
<button id="button">Load</button> 
+4

Las restricciones del navegador cruzado no le permiten hacer esto. –

+1

@JeanPaul, solo estoy configurando el 'src' del' iframe' aquí ... – Dogbert

+0

¿cómo manejarías correctamente los errores? Por ejemplo, tenemos un motor de informes que genera un documento PDF que cargamos en un iframe oculto que debería hacer que el usuario lo descargue automáticamente, pero existe la posibilidad de que algo vaya mal y nos gustaría notificar al usuario del problema . – Jacques

7

Pruebe $(this).load("/file_name.html");. Este método se dirige a un archivo local.

También puede referirse a archivos remotos (en otro dominio) echar un vistazo a: http://en.wikipedia.org/wiki/Same_origin_policy

+6

Entonces, ¿por qué publicaste la identificación si no funciona? –

+1

El "este" en su frase se refiere al dominio "www.google.com" – Manuel

9
$("#frame").click(function() { 
    this.src="http://www.google.com/"; 
}); 

veces llanura JavaScript es aún más fríos y más rápido que jQuery ;-)

+0

El único problema es que en este caso 'este' es el botón, no el iframe ... – patrick

+0

@patrick ¿qué botón ??? – Christophe

+0

Sí, explique qué es "esto" en este contexto. –

0

Por si acaso alguien todavía se tropieza con este viejo pregunta:

El código era teóricamente casi correcto en cierto sentido, el problema era el uso de $ ('this') en lugar de $ (esto), por lo que le pedía a jQuery que buscara una etiqueta.

$(document).ready(function(){ 
    $("#frame").click(function() { 
    $(this).load("http://www.google.com/"); 
    }); 
}); 

El guión en sí woudln't trabajo, ya que es en este momento, porque aunque la función de carga() en sí es una función de AJAX y Google no parece permitir específicamente el uso de la carga de esta página con AJAX, pero este método debería ser fácil de usar para cargar páginas de su propio dominio mediante rutas relativas.

0

aquí es Iframe a la vista:

<iframe class="img-responsive" id="ifmReport" width="1090" height="1200" > 

    </iframe> 

carga de él en escritura:

$('#ifmReport').attr('src', '/ReportViewer/ReportViewer.aspx'); 
Cuestiones relacionadas