2009-10-12 3 views
85

Mi chiedevo se è possibile avere un sito con un iframe e qualche codice jquery che cambia il contenuto dell'iframe ogni 30 secondi. Il contenuto è in diverse pagine web.Come faccio a cambiare dinamicamente il contenuto in un iframe usando jquery?

Qualcosa di simile a questo:

<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script> 
     $(document).ready(function(){ 
     var array = new array(); 
     array[0] = 'http://webPage1.com'; 
     array[1] = 'http://webPage2.com'; 
     // And so on. 
     // Do something here to change the iframe every 30 second 
     }); 
    </script> 
    </head> 
    <body> 
    <iframe id="frame"></iframe> 
    </body> 
</html> 
+0

La parte inferiore del post non è visibile, ma è stato HTML di base con un iframe. – Audun

+0

@Audun: l'ho risolto per te; la volta successiva, evidenzia tutto e usa il pulsante codice. Inoltre, la spaziatura è fredda. – geowa4

+0

cose come 'http: // webPage1.com' devono essere tra virgolette! '//' farà un commento! – geowa4

risposta

129
<html> 
    <head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script> 
     $(document).ready(function(){ 
     var locations = ["http://webPage1.com", "http://webPage2.com"]; 
     var len = locations.length; 
     var iframe = $('#frame'); 
     var i = 0; 
     setInterval(function() { 
      iframe.attr('src', locations[++i % len]); 
     }, 30000); 
     }); 
    </script> 
    </head> 
    <body> 
    <iframe id="frame"></iframe> 
    </body> 
</html> 
+15

Il [++ i% len] come modo per scorrere l'array con il riciclaggio è geniale! Questo mi ha insegnato un nuovo modello! Grazie! – rhh

+8

Si noti che all'interno della funzione setInterval non è necessario utilizzare "$ (iframe)". ma piuttosto puoi direttamente "iframe". perché hai già creato iframe come un oggetto jQuery poche righe sopra. Saluti. –

+0

Come se l'intervallo impostato fosse cambiato dinamicamente? – NPE

7

Se si desidera solo cambiare dove i punti di iframe per e non l'effettivo contenuto all'interno del iframe, si avrebbe solo bisogno di modificare l'attributo src.

$("#myiframe").attr("src", "newwebpage.html"); 
+2

load() non è una funzione jQuery utilizzata in questo modo. Il carico è per AJAX – Hurda

+0

Il caricamento non è per Ajax, per favore @Hurda fare riferimento alla documentazione (http://api.jquery.com/load-event/) Vedrai che Load è usato per agganciare un anche quando qualcosa è finito . Potresti usare Carica con un'immagine. Ma, devo essere d'accordo con te che non è appropriato né nel caso che Anthony fornisce. –

+0

@Doak - Continuo a pensare che abbia http://api.jquery.com/load/ ajax caricare - carica un po 'di contenuto. Il metodo effettivo viene scelto in base ai parametri, quindi non possiamo esserne certi. Sono solo curioso di sapere perché senti il ​​bisogno di provare a correggermi dopo 11 mesi? – Hurda

4
var handle = setInterval(changeIframe, 30000); 
var sites = ["google.com", "yahoo.com"]; 
var index = 0; 

function changeIframe() { 
    $('#frame')[0].src = sites[index++]; 
    index = index >= sites.length ? 0 : index; 
}