2011-05-16 14 views
9

Ho questa parte di codice. Quando la pagina viene caricata anche tutte le div sono caricate ma non ancora visibili. È un modo per iniziare a caricare il contenuto del div quando viene cliccato? Ora la pagina è rallentato a causa di tutti divCarica solo div iframe onclick

<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"> 
+1

Perché non usare la tecnica AJAX per caricare dinamicamente i contenuti in un div su una specifica DOM evento invece di iframe? –

+1

Perché questa domanda è contrassegnata come 'php' quando riguarda solo JavaScript e HTML? –

risposta

14

Vuoi dire caricare l'iframe all'interno del div solo quando un elemento viene cliccato? In tal caso è possibile eliminare l'attributo src iframe dal tag iframe e impostare lo src solo quando si fa clic sull'elemento.

Sul iframe:

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

Sull'elemento cliccabile:

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

Ottima soluzione anche se non riesco a farlo funzionare aggiungendo l'onclick all'immagine Il div è mostrato ma vuoto. – Muiter

+0

Hai aggiunto l'id sull'iframe? Guarda la console javascript se genera alcuni errori – mck89

+0

Sì, lo ho. L'errore è Uncaught SyntaxError: Unexpected token} Questa è la linea completa: echo ''; – Muiter

3

jQuery rende facile!

Caricare sotto nella sezione <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> 
1
<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>