¿Cómo cambio dinámicamente el contenido en un iframe usando jquery?

Me preguntaba si es posible tener un sitio con un iframe y algún código jquery que cambie el contenido del iframe cada 30 segundos. El contenido está en diferentes páginas web.

Algo como esto:

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

La parte inferior de la publicación no se muestra, pero era un html básico con un iframe.

— Audun

@Audun: te lo arreglé; la próxima vez, resalte todo y use el botón de código. Además, el espaciado es genial.

— geowa4

¡Cosas como http://webPage1.comdeben estar entre comillas! //hará un comentario!

— geowa4

Respuestas:

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
fuente

¡El [++ i% len] como una forma de iterar a través de la matriz con reciclaje es brillante! ¡Eso me enseñó un nuevo patrón! ¡Gracias!

— rhh

Tenga en cuenta que dentro de la función setInterval no es necesario utilizar "$ (iframe)". sino que puede "iframe" directamente. porque ya ha creado iframe como un objeto jQuery pocas líneas arriba. Salud.

— Mario Awad

¿Qué pasa si el intervalo configurado cambia dinámicamente?

— Yohanes AI

Use setTimeout en su lugar entonces

— Anatoliy

Si solo desea cambiar el lugar al que apunta el iframe y no el contenido real dentro del iframe, solo necesitaría cambiar el srcatributo.

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

— Antonio
fuente

load () no es una función jQuery usada de esta manera. La carga es para AJAX

— Hurda

Load no es para Ajax, por favor @Hurda consulte la documentación ( api.jquery.com/load-event ) Verá que Load se usa para enganchar un incluso cuando se termina de cargar algo. Puede usar Cargar con una imagen. Pero tengo que estar de acuerdo contigo en que tampoco es apropiado en el caso que brinda Anthony.

— Patrick Desjardins

@Doak - Sigo pensando que ment api.jquery.com/load ajax load - carga algo de contenido. El método real se elige en función de los parámetros, por lo que no podemos estar seguros. Solo tengo curiosidad por saber por qué siente la necesidad de intentar corregirme después de 11 meses.

— Hurda

Bueno, estoy seguro de que entre ustedes dos, ambos tienen razón. Ha pasado tanto tiempo desde que toqué jquery, no recuerdo qué hace la carga. Estoy seguro de que cuando escribí la respuesta hace 25 meses tenía la impresión de que load()podría usarse para recargar cualquier ventana u objeto de documento. Como dije, ya no puedo recordar lo que realmente hace. Creo que, en general, estaba tratando de presentar una opción que era simple y no requería negociar políticas del mismo origen.

— Anthony

De hecho, creo que Hurda es bastante ridículo asumir a qué método me refería, ya que ninguno de los dos lograría realmente lo que yo estaba sugiriendo. ¿Por qué pensaría que un método destinado a ajax recargaría un iframe más de lo que pensaría que un método destinado a la vinculación de eventos lo recargaría? En todo caso, probablemente estaba pensando en js puros y en la forma en que usas "onblah" para vincular y "blah" para disparar el evento. De cualquier manera, el método no recargaría el iframe, así que edité mi respuesta.

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