¿Cómo inserto dinámicamente un iframe en un div usando jQuery?¿Cómo inserto dinámicamente un iframe en un div
$(document).ready(function() {
$("div").html("<iframe src='http://google.com'><iframe>");
});
He intentado con el código anterior, pero no funciona.
Lo que tienes obras: http://jsfiddle.net/cUSVj/
A pesar de tener en cuenta que no se puede hacer mucho con ella después de que se crea si está en no en el mismo dominio, esto es debido a restricciones en su lugar por la same-origin policy.
Editar: estaba cerrando la etiqueta pensando que era un error de pasta, que le están faltando un / en su etiqueta de cierre </iframe> ... esto va/no va a funcionar dependiendo de cuán generoso es el navegador. Asegúrese de cerrarlo correctamente para que su HTML sea válido, de lo contrario tendrá problemas con varios navegadores, si funciona para empezar.
@ lam3r4370 - Depende de cómo ese entorno maneje una etiqueta no cerrada, vea mi respuesta actualizada, volví a leer su pregunta, no la vi la primera vez, simplemente la arreglé a ciegas en jsfiddle. –
Sí, lo probé "dentro" de phpDesigner y eso es porque no funcionó ... P.S: Sí, es el error de pegar de la mía. – lam3r4370
+1 por mostrarme algo nuevo, jsfiddle.net. ¿En qué roca he estado? – Tommy
El código jQuery real se ve bien, puede que no se hace referencia a la div decir correctamente
#div - would be an element with the id "div"
.div - would be an element with the class "div"
Funciona, yo sólo probé, lo que podría necesitar es dar jQuery el id/clase del div que desea insertar el iframe
por ejemplo. (id)
$("#myDiv").html("<iframe src='http://google.com'></iframe>");
por ejemplo. (clase)
$(".myDiv").html("<iframe src='http://google.com'></iframe>");
Sí. Está funcionando bien.
Marque aquí: http://jsbin.com/arolo3/2/edit
debe cerrar la etiqueta iframe. Puede ser el problema.
que no cerró la etiqueta iframe
<iframe>
</iframe>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#frameDiv").html("<iframe src='http://google.com'></iframe>");
});
</script>
<p>An IFrame should appear here</p>
<div id="frameDiv" style="width: 400px; height: 400px;"></div>
</body>
lo he usado como este y que funciona bien ;-)
$(".div").html("<iframe width='850' height='450' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://yourlocation.com'></iframe>");
$(".div").css("display","block");
esta pregunta recibió una respuesta aceptada hace dos años –
Eso no restringirá la pregunta del usuario en absoluto. Esta es una comunidad y un usuario puede responder en cualquier momento si cree que puede intentarlo –
funciona para mí. ¿Tiene una referencia a la biblioteca Jquery en la página? – amelvin
Como se menciona a continuación, recuerde cerrar su etiqueta iframe. También tenga en cuenta que debido a que Google ahora está enviando un encabezado de respuesta de "X-Frame-Options: SAMEORIGIN" obtendrá un iframe vacío, por lo tanto, pruebe con otro src. – Muleskinner