¿Cómo cambio dinámicamente el contenido de un iframe utilizando 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.¿Cómo cambio dinámicamente el contenido de un iframe utilizando jquery?

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>

Fuente

2009-10-12 Audun

La parte inferior del poste no se muestra, pero fue html básico con un iframe. – Audun

@Audun: lo arreglé por ti; la próxima vez, resalta todo y usa el botón de código. Además, el espaciado es genial. – geowa4

cosas como 'http: // webPage1.com' deben estar entre comillas! '//' ¡hará un comentario! – geowa4

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>

Fuente

2009-10-12 13:01:03 Anatoliy

+15

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

Tenga en cuenta que dentro de la función setInterval no necesita usar "$ (iframe)". sino que puedes directamente "iframe". porque ya ha creado iframe como un objeto jQuery pocas líneas arriba. Aclamaciones. –

¿Cómo se modificó dinámicamente el intervalo configurado? – NPE

Si lo que desea es cambiar el lugar donde los puntos iframe para y no el contenido real dentro del marco flotante, sólo tendría que cambiar el atributo src.

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

Fuente

2009-10-12 12:52:46 Anthony

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

La carga no es para Ajax, por favor, @Hurda consulte la documentación (http://api.jquery.com/load-event/) Verá que la carga se utiliza para enganchar incluso cuando se hace algo cargando . Podría usar Cargar con una imagen. Pero tengo que estar de acuerdo con usted en que tampoco es apropiado en el caso que Anthony proporciona. –

@Doak - Sigo pensando que el mensaje http://api.jquery.com/load/ ajax carga - 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 qué sientes la necesidad de intentar corregirme después de 11 meses? – Hurda

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

Fuente

2009-10-12 12:55:25 geowa4

¿Cómo cambio dinámicamente el contenido de un iframe utilizando jquery?

Respuesta

Cuestiones relacionadas