Tengo una web y necesito crear un menu que al darle click a un boton se abra un html dentro del html pero necesito que se cargue solo al darle click porque es muy pesado por mas imagenes y si se carga todo gastaria muchos datos a los clientes que la mayoría se conecta con datos moviles asi que quiero que solo si el cliente da click se descargen los datos.. tengo todo bien solo necesito algun codigo para que el iframe no se cargue sino hasta darle click Alguien tiene algun modo algun codigo que pueda servir?
-
Es muy importante que compartas código, o alguna manera manera de entender exactamente que deseas hacer, debido a que la situación que planteas se presta a interpretaciones. Podrías hacerlo de manera muy sencilla con Jquery. Espero que esto te ayude: api.jquery.com/load , w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load– Joel Muñoz MoranCommented el 29 oct. 2018 a las 3:42
Añade un comentario
|
2 respuestas
En tu HTML declaras la etiqueta iframe sin el atributo src
<iframe style='display:none' id='frame' width='400' height='400' frameborder='0'></iframe>
Importamos jQuery
<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
Luego en javascript hacemos una funcion para cargar la url que quieres.
function loadPage(){
var frame = $('#frame');
var url = 'AQUI LA URL QUE QUIERAS INSERTAR EN TU IFRAME';
frame.attr('src',url).show();
}
y finalmente llamas a la funcion desde cualquier nodo que tu quieras por ejemplo un <button onclick='loadPage()'>Abrir iframe</button>
Puedes hacer lo de dos maneras:
1) Creando el iframe al momento de dar click al menú:
document.getElementById("crear").addEventListener("click", () => {
var iframe = document.createElement('iframe');
var html = '<body>Tu nuevo HTML</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.getElementById("contenido").appendChild(iframe);
});
<button id="crear">Menu Crear Iframe</button>
<div id="contenido"></div>
2) Ya el iframe existe y solo le seteas el atributo src al momento de darle click al menú:
document.getElementById("crear").addEventListener("click", () => {
var html = '<body>Tu nuevo HTML</body>';
document.getElementById("iframe").src = 'data:text/html;charset=utf-8,' + encodeURI(html);
});
<button id="crear">Menu Crear Iframe</button>
<div id="contenido">
<iframe id="iframe"></iframe>
</div>
Espero te sea de utilidad