Como altero dinamicamente o conteúdo em um iframe usando jquery?

Eu queria saber se é possível ter um site com um iframe e algum código jquery que altera o conteúdo do iframe a cada 30 segundos. O conteúdo está em diferentes páginas da web.

Algo assim:

<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

A parte inferior do post não está aparecendo, mas era html básico com um iframe.

— Audun

@Audun: consertei para você; da próxima vez, destaque tudo e use o botão de código. Além disso, o espaçamento é legal.

— geowa4

coisas como http://webPage1.comprecisam estar entre aspas! //vai fazer um comentário!

— geowa4

Respostas:

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

O [++ i% len] como forma de iterar pelo array com reciclagem é brilhante! Isso me ensinou um novo padrão! Obrigado!

— rh

Observe que dentro da função setInterval você não precisa usar "$ (iframe)." mas em vez disso, você pode "iframe" diretamente. porque você já criou o iframe como um objeto jQuery algumas linhas acima. Felicidades.

— Mario Awad

Como se o intervalo configurado mudasse dinamicamente?

— Yohanes AI

Em vez disso, use setTimeout

— Anatoliy,

Se você deseja apenas alterar para onde o iframe aponta e não o conteúdo real dentro do iframe, você só precisa alterar o srcatributo.

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

— Anthony
fonte

load () não é uma função jQuery usada dessa forma. A carga é para AJAX

— Hurda

Load não é para Ajax, por favor @Hurda consulte a documentação ( api.jquery.com/load-event ). Você verá que Load é usado para ligar um mesmo quando algo é carregado. Você pode usar Carregar com uma imagem. Mas, tenho que concordar com você que também não é apropriado no caso que Anthony oferece.

— Patrick Desjardins

@Doak - Eu ainda acho que ele ment api.jquery.com/load ajax load - ele carrega algum conteúdo. O método real é escolhido com base em parâmetros - portanto, não podemos ter certeza. Só estou curioso por que você sente a necessidade de tentar me corrigir depois de 11 meses?

— Hurda

Bem, eu tenho certeza que entre vocês dois, vocês dois estão certos. Já faz tanto tempo desde que toquei em jquery que não consigo lembrar o que o load faz. Tenho certeza quando escrevi a resposta, 25 meses atrás, que tive a impressão de que load()poderia ser usado para recarregar qualquer janela ou objeto de documento. Como eu disse, não consigo mais me lembrar o que ele realmente faz. Acho que, no geral, estava tentando apresentar uma opção que fosse simples e não exigisse a negociação de políticas de mesma origem.

— Anthony

Na verdade, acho que é bastante ridículo Hurda presumir qual método eu quis dizer, já que nenhum deles realmente realizaria o que eu estava sugerindo. Por que eu pensaria que um método destinado a ajax recarregaria um iframe mais do que eu pensaria que um método destinado à associação de evento o recarregaria? Se alguma coisa, eu provavelmente estava pensando em js puro e na maneira como você usa "onblah" para vincular e "blah" para disparar o evento. De qualquer maneira, o método não recarregaria o iframe, então editei minha resposta.

— 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