Jquery kullanarak bir iframe'deki içeriği dinamik olarak nasıl değiştirebilirim?

Bir iframe ve her 30 saniyede bir iframe içeriğini değiştiren bazı jquery kodlarına sahip bir siteye sahip olmanın mümkün olup olmadığını merak ediyordum. İçerik farklı web sayfalarında.

Bunun gibi bir şey:

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

Gönderinin alt kısmı görünmüyor, ancak bir iframe ile temel html idi.

— Audun

@Audun: Senin için düzelttim; bir dahaki sefere her şeyi vurgulayın ve kod düğmesini kullanın. Ayrıca, aralıklar da iyidir.

— geowa4

http://webPage1.comtırnak içinde olması gerektiği gibi şeyler ! //bir yorum yapacak!

— geowa4

Yanıtlar:

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
kaynak

[++ i% len], geri dönüştürmeyle dizi içinde yinelemenin bir yolu olarak mükemmel! Bu bana yeni bir kalıp öğretti! Teşekkürler!

— rhh

SetInterval işlevi içinde "$ (iframe)" kullanmanız gerekmediğini unutmayın. bunun yerine doğrudan "iframe" yapabilirsiniz. çünkü birkaç satır yukarıda bir jQuery nesnesi olarak iframe oluşturmuşsunuzdur. Şerefe.

— Mario Awad

Aralık ayarı dinamik olarak değişirse nasıl olur?

— Yohanes AI 18'17

Yerine daha sonra kullan setTimeout

— Anatoliy

Yalnızca iframe'in nereye işaret ettiğini ve iframe içindeki gerçek içeriği değiştirmek istemiyorsanız, yalnızca srcniteliği değiştirmeniz gerekir .

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

— Anthony
kaynak

load () bu şekilde kullanılan bir jQuery işlevi değildir. Yük AJAX içindir

— Hurda

Yük Ajax için değildir, lütfen @Hurda belgelere bakın ( api.jquery.com/load-event ) Yüklemenin bir şey yükleme tamamlandığında bile kancalamak için kullanıldığını göreceksiniz. Load'u bir görüntü ile kullanabilirsiniz. Ancak, Anthony'nin sağladığı durumda da bunun uygun olmadığı konusunda sizinle hemfikirim.

— Patrick Desjardins

@Doak - Hala api.jquery.com/load ajax yüklediğini düşünüyorum - bazı içerikler yüklüyor. Gerçek yöntem parametrelere göre seçilir - bu yüzden emin olamayız. Neden 11 ay sonra beni düzeltmeye çalışma ihtiyacı hissettiğini merak ediyorum?

— Hurda

Eminim ikinizin arasında, ikiniz de haklısınız. Jquery'ye dokunmayalı çok uzun zaman oldu, yükün ne yaptığını hatırlayamıyorum. Eminim 25 ay önce cevabı yazdığımda, load()herhangi bir pencere veya belge nesnesini yeniden yüklemek için kullanılabilecek bir izlenim içindeydim. Dediğim gibi, artık gerçekte ne yaptığını hatırlayamıyorum. Genel olarak basit olan ve aynı menşeli politikaların müzakere edilmesini gerektirmeyen bir seçenek sunmaya çalıştığımı düşünüyorum.

— Anthony

Aslında, Hurda'nın hangi yöntemi kastettiğimi varsaymak oldukça saçma olduğunu düşünüyorum, çünkü ikisi de önerdiğim şeyi gerçekten başaramayacaktı. Neden ajax için tasarlanmış bir yöntemin bir iframe'i olay bağlamaya yönelik bir yöntemin onu yeniden yükleyeceğini düşündüğümden daha fazla yeniden yükleyeceğini düşüneyim? Bir şey olursa, muhtemelen saf js'yi ve bağlama için "onblah" ı ve olayı ateşlemek için "blah" ı kullanma şeklinizi düşünüyordum. Her iki durumda da, yöntem iframe'i yeniden yüklemedi, bu yüzden cevabımı düzenledim.

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