ฉันจะเปลี่ยนเนื้อหาใน iframe แบบไดนามิกโดยใช้ jquery ได้อย่างไร

ฉันสงสัยว่าเป็นไปได้ไหมที่จะมีไซต์ที่มี iframe และโค้ด jquery ที่เปลี่ยนเนื้อหา iframe ทุกๆ 30 วินาที เนื้อหาอยู่ในหน้าเว็บที่แตกต่างกัน

สิ่งนี้:

<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
แหล่งที่มา

ด้านล่างของโพสต์ไม่แสดง แต่เป็น html พื้นฐานที่มี iframe

— Audun

@Audun: ฉันแก้ไขให้คุณ; ครั้งต่อไปให้ไฮไลต์ทุกอย่างแล้วใช้ปุ่มรหัส นอกจากนี้การเว้นระยะก็เย็น

— geowa4

สิ่งที่http://webPage1.comต้องมีในเครื่องหมายคำพูด! //จะแสดงความคิดเห็น!

— geowa4

คำตอบ:

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>

— อนาโตลี
แหล่งที่มา

[++ i% len] เป็นวิธีการวนซ้ำผ่านอาร์เรย์ด้วยการรีไซเคิลนั้นยอดเยี่ยมมาก! ที่สอนรูปแบบใหม่ให้ฉัน! ขอบคุณ!

— rhh

โปรดทราบว่าภายในฟังก์ชัน setInterval คุณไม่จำเป็นต้องใช้ "$ (iframe)" แต่คุณสามารถ "iframe" ได้โดยตรง เพราะคุณได้สร้าง iframe เป็นวัตถุ jQuery แล้วไม่กี่บรรทัดข้างบน ไชโย

— Mario Awad

จะทำอย่างไรหากช่วงเวลาที่ตั้งค่าแบบไดนามิกเปลี่ยนไป

— Yohanes AI

ใช้ setTimeout แทน

— Anatoliy

หากคุณเพียงต้องการเปลี่ยนตำแหน่งที่ iframe ชี้ไปที่ไม่ใช่เนื้อหาจริงภายใน iframe คุณก็ต้องเปลี่ยนsrcแอตทริบิวต์

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

— แอนโธนี่
แหล่งที่มา

load () ไม่ใช่ฟังก์ชัน jQuery ที่ใช้ในลักษณะนี้ โหลดสำหรับ AJAX

— Hurda

โหลดไม่ได้สำหรับ Ajax โปรด @Hurda อ้างอิงจากเอกสาร ( api.jquery.com/load-event ) คุณจะเห็นว่า Load ใช้เพื่อเชื่อมต่อแม้ว่าบางสิ่งจะโหลดเสร็จแล้วก็ตาม คุณสามารถใช้โหลดกับรูปภาพ แต่ฉันต้องยอมรับกับคุณว่ามันไม่เหมาะสมทั้งในกรณีที่แอนโธนี่ให้

— Patrick Desjardins

@Doak - ฉันยังคิดว่าเขาพูดถึง api.jquery.com/load ajax load - มันโหลดเนื้อหาบางส่วน วิธีการจริงถูกเลือกตามพารามิเตอร์ดังนั้นเราจึงไม่แน่ใจ ฉันแค่อยากรู้ว่าทำไมคุณถึงรู้สึกว่าต้องพยายามแก้ไขฉันหลังจาก 11 เดือน?

— Hurda

ฉันแน่ใจว่าระหว่างคุณสองคนคุณทั้งคู่ถูกต้อง นานมากแล้วที่ฉันได้สัมผัส jquery ฉันจำไม่ได้ว่าโหลดอะไร ฉันแน่ใจว่าเมื่อฉันเขียนคำตอบเมื่อ 25 เดือนที่แล้วว่าฉันอยู่ภายใต้การแสดงผลที่load()สามารถใช้เพื่อโหลดหน้าต่างหรือวัตถุเอกสารซ้ำได้ อย่างที่ฉันพูดฉันจำไม่ได้ว่ามันทำอะไรได้อีกแล้ว ฉันคิดว่าโดยรวมแล้วฉันพยายามนำเสนอตัวเลือกที่เรียบง่ายและไม่จำเป็นต้องเจรจานโยบายที่มาเดียวกัน

— Anthony

อันที่จริงฉันคิดว่าเฮอร์ด้าค่อนข้างไร้สาระที่จะคิดว่าฉันหมายถึงวิธีใดเนื่องจากทั้งสองวิธีไม่สามารถบรรลุสิ่งที่ฉันแนะนำได้จริง เหตุใดฉันจึงคิดว่าวิธีการที่มีไว้สำหรับ ajax จะโหลด iframe ซ้ำได้มากกว่าที่ฉันคิดว่าวิธีการที่มีไว้สำหรับการเชื่อมโยงเหตุการณ์จะโหลดซ้ำได้ ถ้ามีอะไรฉันอาจจะนึกถึง js ที่บริสุทธิ์และวิธีที่คุณใช้ "onblah" ในการผูกมัดและ "blah" เพื่อจุดไฟในงาน ไม่ว่าจะด้วยวิธีใดวิธีการนี้จะไม่โหลด iframe ซ้ำดังนั้นฉันจึงแก้ไขคำตอบ

— 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
แหล่งที่มา