Come faccio a modificare dinamicamente il contenuto in un iframe utilizzando jquery?

Mi chiedevo se sia possibile avere un sito con un iframe e del codice jquery che cambia il contenuto dell'iframe ogni 30 secondi. Il contenuto è in diverse pagine web.

Qualcosa come 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>

jquery iframe

— Audun
fonte

La parte inferiore del post non viene visualizzata, ma era HTML di base con un iframe.

— Audun

@Audun: l'ho aggiustato per te; la prossima volta, evidenzia tutto e usa il pulsante del codice. Inoltre, la spaziatura è interessante.

— geowa4

cose come http://webPage1.comdevono essere tra virgolette! //farò un commento!

— geowa4

Risposte:

135

<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>

— Anatoliy
fonte

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

— rhh

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

— Mario Awad

Come se l'intervallo impostato fosse cambiato dinamicamente?

— Yohanes AI

Usa setTimeout invece allora

— Anatoliy

Se desideri solo modificare il punto in cui punta l'iframe e non il contenuto effettivo all'interno dell'iframe, devi solo modificare l' srcattributo.

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

— Anthony
fonte

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

— Hurda

Load non è per Ajax, per favore @Hurda fai riferimento alla documentazione ( api.jquery.com/load-event ) Vedrai che Load è usato per agganciare un anche quando qualcosa è stato caricato. Puoi usare Carica con un'immagine. Ma devo essere d'accordo con te che non è appropriato neanche nel caso fornito da Anthony.

— Patrick Desjardins

@Doak - Penso ancora che si tratti di api.jquery.com/load ajax load - carica alcuni contenuti. Il metodo effettivo viene scelto in base ai parametri, quindi non possiamo esserne sicuri. Sono solo curioso di sapere perché senti il bisogno di provare a correggermi dopo 11 mesi?

— Hurda

Beh, sono sicuro che tra voi due avete ragione entrambi. È passato così tanto tempo da quando ho toccato jquery, non riesco a ricordare cosa fa il carico. Sono sicuro che quando ho scritto la risposta 25 mesi fa avevo l'impressione che load()potesse essere utilizzato per ricaricare qualsiasi finestra o oggetto documento. Come ho detto, non riesco più a ricordare cosa faccia realmente. Penso che nel complesso stavo cercando di presentare un'opzione che fosse semplice e non richiedesse la negoziazione di politiche della stessa origine.

— Anthony

In realtà, penso che sia piuttosto ridicolo Hurda presumere quale metodo intendessi, dal momento che nessuno dei due avrebbe effettivamente realizzato ciò che stavo suggerendo che avrebbe fatto. Perché dovrei pensare che un metodo pensato per ajax ricaricare un iframe più di quanto penserei che un metodo pensato per l'associazione di eventi lo ricaricherebbe? Se non altro, probabilmente stavo pensando a puro js e al modo in cui usi "onblah" per l'associazione e "blah" per attivare l'evento. In ogni caso, il metodo non ricaricava l'iframe, quindi ho modificato la mia risposta.

— Anthony

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;
}

— geowa4
fonte