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

89

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
17
O [++ i% len] como forma de iterar pelo array com reciclagem é brilhante! Isso me ensinou um novo padrão! Obrigado!
rh
8
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,
8

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
2
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
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;
}
geowa4
fonte