Bagaimana cara mengubah konten secara dinamis di iframe menggunakan jquery?

Saya bertanya-tanya apakah mungkin memiliki situs dengan iframe dan beberapa kode jquery yang mengubah konten iframe setiap 30 detik. Konten ada di halaman web yang berbeda.

Sesuatu seperti ini:

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

Bagian bawah postingan tidak muncul, tetapi itu adalah html dasar dengan iframe.

— Audun

@ Audun: Saya memperbaikinya untuk Anda; lain kali, sorot semuanya dan gunakan tombol kode. Juga, jaraknya keren.

— geowa4

hal-hal seperti http://webPage1.comperlu diberi tanda kutip! //akan memberi komentar!

— geowa4

Jawaban:

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
sumber

[++ i% len] sebagai cara untuk melakukan iterasi melalui larik dengan daur ulang sangatlah brilian! Itu mengajari saya pola baru! Terima kasih!

— rhh

Perhatikan bahwa di dalam fungsi setInterval Anda tidak perlu menggunakan "$ (iframe)." melainkan Anda bisa langsung "iframe." karena Anda sudah membuat iframe sebagai objek jQuery beberapa baris di atas. Bersulang.

— Mario Awad

Bagaimana jika pengaturan interval berubah secara dinamis?

— Yohanes AI

Gunakan setTimeout sebagai gantinya

— Anatoliy

Jika Anda hanya ingin mengubah tujuan iframe dan bukan konten sebenarnya di dalam iframe, Anda hanya perlu mengubah srcatributnya.

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

— Anthony
sumber

load () bukanlah fungsi jQuery yang digunakan dengan cara ini. Beban untuk AJAX

— Hurda

Muat bukan untuk Ajax, silakan @Hurda merujuk ke dokumentasinya ( api.jquery.com/load-event ) Anda akan melihat bahwa Muat digunakan untuk mengaitkan bahkan ketika sesuatu telah selesai memuat. Anda bisa menggunakan Load with an image. Tapi, saya harus setuju dengan Anda bahwa itu juga tidak sesuai dalam kasus yang Anthony berikan.

— Patrick Desjardins

@ Doak - Saya masih berpikir dia ment api.jquery.com/load ajax load - memuat beberapa konten. Metode sebenarnya dipilih berdasarkan parameter - jadi kami tidak bisa memastikannya. Saya hanya ingin tahu mengapa Anda merasa perlu mencoba mengoreksi saya setelah 11 bulan?

— Hurda

Yah, aku yakin diantara kalian berdua, kalian berdua benar. Sudah lama sekali sejak saya menyentuh jquery, saya tidak dapat mengingat apa yang dilakukan beban. Saya yakin Ketika saya menulis jawaban 25 bulan yang lalu bahwa saya mendapat kesan yang load()dapat digunakan untuk memuat ulang jendela atau objek dokumen apa pun. Seperti yang saya katakan, saya tidak ingat lagi apa yang sebenarnya dilakukannya. Saya pikir secara keseluruhan saya mencoba menyajikan opsi yang sederhana dan tidak memerlukan negosiasi kebijakan asal yang sama.

— Anthony

Sebenarnya, saya pikir itu cukup konyol Hurda untuk mengasumsikan metode mana yang saya maksud, karena tidak satupun dari mereka akan benar-benar mencapai apa yang saya sarankan. Mengapa saya berpikir bahwa metode yang dimaksudkan untuk ajax akan memuat ulang iframe lebih dari yang saya pikirkan bahwa metode yang dimaksudkan untuk pengikatan acara akan memuat ulang? Jika ada, saya mungkin memikirkan js murni dan cara Anda menggunakan "onblah" untuk mengikat dan "bla" untuk mengaktifkan acara. Bagaimanapun, metode ini tidak akan memuat ulang iframe, jadi saya mengedit jawaban saya.

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