Jak dynamicznie zmieniać zawartość elementu iframe za pomocą jquery?

Zastanawiałem się, czy można mieć witrynę z ramką iframe i kodem jquery, który zmienia zawartość iframe co 30 sekund. Treść znajduje się na różnych stronach internetowych.

Coś takiego:

<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
źródło

Dolna część posta nie jest wyświetlana, ale był to podstawowy kod HTML z ramką iframe.

— Audun

@Audun: naprawiłem to dla Ciebie; następnym razem zaznacz wszystko i użyj przycisku kodu. Również odstępy są fajne.

— geowa4

rzeczy takie jak http://webPage1.commuszą być w cudzysłowie! //skomentuje!

— geowa4

Odpowiedzi:

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>

— Anatolij
źródło

[++ i% len] jako sposób na iterację po tablicy z recyklingiem jest genialny! To nauczyło mnie nowego wzorca! Dzięki!

— rhh

Zwróć uwagę, że wewnątrz funkcji setInterval nie musisz używać „$ (iframe)”. ale raczej możesz bezpośrednio „iframe”. ponieważ utworzyłeś już iframe jako obiekt jQuery kilka wierszy powyżej. Twoje zdrowie.

— Mario Awad

Co zrobić, jeśli interwał zmienił się dynamicznie?

— Yohanes AI

Zamiast tego użyj setTimeout

— Anatoliy

Jeśli chcesz tylko zmienić miejsce, w którym wskazuje element iframe, a nie rzeczywistą zawartość wewnątrz elementu iframe, wystarczy zmienić srcatrybut.

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

— Anthony
źródło

load () nie jest funkcją jQuery używaną w ten sposób. Load is for AJAX

— Hurda,

Ładowanie nie jest przeznaczone dla Ajax, @Hurda zapoznaj się z dokumentacją ( api.jquery.com/load-event ). Zobaczysz, że Load służy do przechwytywania, nawet gdy coś jest ładowane. Możesz użyć Load z obrazem. Ale muszę się z tobą zgodzić, że nie jest to również właściwe w przypadku, gdy zapewnia Anthony.

— Patrick Desjardins

@Doak - nadal myślę, że ma na myśli api.jquery.com/load ajax load - ładuje trochę treści. Właściwa metoda jest wybierana na podstawie parametrów - więc nie mamy pewności. Jestem po prostu ciekawy, dlaczego czujesz potrzebę spróbowania mnie poprawić po 11 miesiącach?

— Hurda,

Cóż, jestem pewien, że między wami oboje macie rację. Minęło tak dużo czasu, odkąd dotknąłem jquery, nie pamiętam, co robi load. Jestem pewien, że kiedy 25 miesięcy temu pisałem odpowiedź, miałem wrażenie, że load()można by go użyć do przeładowania dowolnego okna lub obiektu dokumentu. Jak powiedziałem, nie pamiętam już, co to właściwie zrobiło. Myślę, że ogólnie starałem się przedstawić opcję, która byłaby prosta i nie wymagała negocjowania zasad tego samego pochodzenia.

— Anthony

Właściwie myślę, że Hurda to dość śmieszne zakładanie, o którą metodę mam na myśli, ponieważ żadna z nich nie osiągnęłaby tego, co sugerowałem. Dlaczego miałbym pomyśleć, że metoda przeznaczona dla AJAX przeładuje ramkę iframe tak samo, jak nie sądziłbym, że metoda przeznaczona do wiązania zdarzeń przeładuje go? Jeśli już, to prawdopodobnie myślałem o czystym js i sposobie, w jaki używasz „onblah” do wiązania i „bla” do odpalenia zdarzenia. Tak czy inaczej, metoda nie ładuje ponownie elementu iframe, więc zmodyfikowałem odpowiedź.

— 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
źródło