Solo cargar iframe div en clics

Tengo esta parte del código. Cuando se carga la página también se cargan todos los div, pero aún no están visibles. ¿Es la forma de comenzar a cargar el contenido del div cuando se hace clic? Ahora la página se ralentiza debido a toda la divSolo cargar iframe div en clics

<a href="#?w=550" rel="popup_add_dossier" class="poplight" title="'.$lang['form_add'].'"><img src="images/icon/new.png" ></a> 

<div id="popup_add_dossier" class="popup_block"> 
<iframe src="add_dossier.php" frameborder="0" scrolling="no" width="550" height="400">

Fuente

2011-05-16 Muiter

¿Por qué no usar la técnica AJAX para cargar dinámicamente el contenido en un div en una de DOM evento específico en lugar de iframe? –

¿Por qué esta pregunta está etiquetada como 'php' cuando solo involucra JavaScript y HTML? –

¿Quiere decir que cargue el marco flotante dentro del div sólo cuando se hace clic en un elemento? De ser así, puede eliminar el atributo iframe src de la etiqueta iframe y establecer el src solo cuando se haga clic en el elemento.

En el marco flotante:

<iframe id='ifr' frameborder="0" scrolling="no" width="550" height="400">

En el elemento se puede hacer clic:

onClick='document.getElementById("ifr").src="add_dossier.php";'

Fuente

2011-05-16 10:17:12 mck89

Gran soluciÃ³n, aunque no puedo hacer que funcione al agregar el onclick a la imagen El div se muestra pero vacÃo. – Muiter

¿Ha agregado la identificación en el iframe? Mira la consola javascript si arroja algunos errores – mck89

Sí, tengo. El error es Untaught SyntaxError: Token inesperado} Esta es la línea completa: echo ''; – Muiter

jQuery hace que sea fácil!

Cargue a continuación en la sección <head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script> 
jQuery(function(){ 
    $("iframe").each(function(){ 
     this.tmp = this.src; 
     this.src = ""; 
    }) 
    .parent(".popup_block") 
    .click(function(){ 
     var frame = $(this).children("iframe")[0]; 
     console.log(frame);  frame.src = frame.tmp; 
    }); 
}); 
</script>

Fuente

2011-05-16 10:33:48 senta

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
    $('#button').click(function(){ 
     if(!$('#iframe').length) { 
       $('#iframeHolder').html('<iframe id="iframe" src="http://google.com" width="700" height="450"></iframe>'); 
     } 
    }); 
}); 
</script> 

<a id="button">Button</a> 
<div id="iframeHolder"></div>

Fuente

2011-07-29 09:09:45 user869048

Respuesta

Cuestiones relacionadas