Làm cách nào để thay đổi động nội dung trong iframe bằng jquery?

Tôi đã tự hỏi liệu có thể có một trang web có iframe và một số mã jquery thay đổi nội dung iframe cứ sau 30 giây hay không. Nội dung ở các trang web khác nhau.

Một cái gì đó như thế này:

<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
nguồn

Phần cuối của bài đăng không hiển thị, nhưng đó là html cơ bản với iframe.

— Audun

@Audun: tôi đã sửa nó cho bạn; lần sau, hãy đánh dấu mọi thứ và sử dụng nút mã. Ngoài ra, khoảng cách rất tuyệt.

— geowa4

những thứ như http://webPage1.comcần phải được trong dấu ngoặc kép! //sẽ đưa ra nhận xét!

— geowa4

Câu trả lời:

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
nguồn

[++ i% len] như một cách để lặp qua mảng có tái chế thật tuyệt vời! Điều đó đã dạy cho tôi một khuôn mẫu mới! Cảm ơn!

— rhh

Lưu ý rằng bên trong hàm setInterval, bạn không cần sử dụng "$ (iframe)." nhưng đúng hơn bạn có thể trực tiếp "iframe". vì bạn đã tạo iframe dưới dạng đối tượng jQuery ở trên vài dòng. Chúc mừng.

— Mario Awad

Làm thế nào nếu khoảng thời gian được thiết lập tự động thay đổi?

— Yohanes AI

Sử dụng setTimeout thay vì sau đó

— Anatoliy

Nếu bạn chỉ muốn thay đổi nơi iframe trỏ đến chứ không phải nội dung thực bên trong iframe, bạn chỉ cần thay đổi srcthuộc tính.

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

— Anthony
nguồn

load () không phải là một hàm jQuery được sử dụng theo cách này. Tải dành cho AJAX

— Hurda

Tải không dành cho Ajax, vui lòng @Hurda tham khảo tài liệu ( api.jquery.com/load-event ) Bạn sẽ thấy rằng Tải được sử dụng để kết nối ngay cả khi tải xong thứ gì đó. Bạn có thể sử dụng Tải với một hình ảnh. Nhưng, tôi phải đồng ý với bạn rằng nó cũng không phù hợp trong trường hợp Anthony cung cấp.

— Patrick Desjardins

@Doak - Tôi vẫn nghĩ anh ấy đề cập đến api.jquery.com/load ajax load - nó tải một số nội dung. Phương pháp thực tế được chọn dựa trên các tham số - vì vậy chúng tôi không thể chắc chắn. Tôi chỉ tò mò tại sao bạn cảm thấy cần phải cố gắng sửa chữa tôi sau 11 tháng?

— Hurda

À, tôi chắc giữa hai người, cả hai đều đúng. Đã quá lâu kể từ khi tôi chạm vào jquery, tôi không thể nhớ tải hoạt động gì. Tôi chắc chắn Khi tôi viết câu trả lời cách đây 25 tháng rằng tôi có ấn tượng rằng nó load()có thể được sử dụng để tải lại bất kỳ đối tượng cửa sổ hoặc tài liệu nào. Như tôi đã nói, tôi không thể nhớ nó thực sự làm gì nữa. Tôi nghĩ về tổng thể, tôi đã cố gắng đưa ra một lựa chọn đơn giản và không yêu cầu đàm phán các chính sách cùng nguồn gốc.

— Anthony

Trên thực tế, tôi nghĩ Hurda khá nực cười khi cho rằng phương pháp tôi muốn nói đến, vì cả hai đều không thực sự đạt được những gì tôi đề xuất. Tại sao tôi nghĩ rằng một phương thức dành cho ajax sẽ tải lại một iframe nhiều hơn tôi nghĩ rằng một phương thức dành cho ràng buộc sự kiện sẽ tải lại nó? Nếu có gì, tôi có lẽ đang nghĩ đến j thuần túy và cách bạn sử dụng "onblah" để ràng buộc và "blah" để kích hoạt sự kiện. Dù bằng cách nào, phương pháp này sẽ không tải lại iframe, vì vậy tôi đã chỉnh sửa câu trả lời của mình.

— 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
nguồn