Làm thế nào để kiểm tra xem iframe đã được tải hoặc nó có nội dung?

Question 1

Tôi có iframe với id = "myIframe" và đây là mã của tôi để tải nội dung của nó:

$('#myIframe').attr("src", "my_url");

Vấn đề là đôi khi tải quá lâu và đôi khi tải rất nhanh. Vì vậy, tôi phải sử dụng chức năng "setTimeout":

setTimeout(function(){
   if (//something shows iframe is loaded or has content)
   {
       //my code
   }
   else
   {
       $('#myIframe').attr("src",""); //stop loading content
   }
},5000);

Tất cả những gì tôi muốn biết là làm thế nào để tìm hiểu xem một iFrame đã được tải hay nó có nội dung. Sử dụng iframe.contents().find()sẽ không hoạt động. Tôi không thể sử dụng iframe.load(function(){}).

Question 2

Thử đi.

<script>
function checkIframeLoaded() {
    // Get a handle to the iframe element
    var iframe = document.getElementById('i_frame');
    var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

    // Check if loading is complete
    if (  iframeDoc.readyState  == 'complete' ) {
        //iframe.contentWindow.alert("Hello");
        iframe.contentWindow.onload = function(){
            alert("I am loaded");
        };
        // The loading is complete, call the function we want executed once the iframe is loaded
        afterLoading();
        return;
    } 

    // If we are here, it is not loaded. Set things up so we check   the status again in 100 milliseconds
    window.setTimeout(checkIframeLoaded, 100);
}

function afterLoading(){
    alert("I am here");
}
</script>

<body onload="checkIframeLoaded();">

Question 3

vui lòng sử dụng:

$('#myIframe').on('load', function(){
    //your code (will be called once iframe is done loading)
});

Đã cập nhật câu trả lời của tôi khi các tiêu chuẩn thay đổi.

Question 4

Tôi đã gặp vấn đề tương tự và đã thêm vào vấn đề này, tôi cần kiểm tra xem iframe có được tải không bất kể chính sách tên miền chéo. Tôi đang phát triển một tiện ích mở rộng chrome đưa một tập lệnh nhất định vào một trang web và hiển thị một số nội dung từ trang chính trong iframe. Tôi đã thử làm theo cách tiếp cận và điều này hoàn toàn phù hợp với tôi.
Tái bút: Trong trường hợp của tôi, tôi có quyền kiểm soát nội dung trong iframe nhưng không có trên trang web mẹ. (Iframe được lưu trữ trên máy chủ của riêng tôi)

Đầu tiên:
Tạo iframe với data-thuộc tính trong đó như (phần này nằm trong tập lệnh được chèn trong trường hợp của tôi)
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>

Bây giờ trong mã iframe, hãy sử dụng:

var sourceURL = document.referrer;
window.parent.postMessage('1',sourceURL);

Bây giờ quay lại tập lệnh được chèn theo trường hợp của tôi:

setTimeout(function(){
  var myIframe = document.getElementById('myiframe');
  var isLoaded = myIframe.prop('data-isloaded');
  if(isLoaded != '1')
  {
    console.log('iframe failed to load');
  } else {
    console.log('iframe loaded');
  }
},3000);

và,

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
    if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons
    {
        console.log('URL issues');
        return;
    }
    else {
        var myMsg = event.data;
        if(myMsg == '1'){
            //8-12-18 changed from 'data-isload' to 'data-isloaded
            $("#myiframe").prop('data-isloaded', '1');
        }
    }           
}

Nó có thể không trả lời chính xác câu hỏi nhưng nó thực sự là một trường hợp có thể xảy ra với câu hỏi này mà tôi đã giải quyết bằng phương pháp này.

Question 5

Tùy chọn dễ nhất:

<script type="text/javascript">
  function frameload(){
   alert("iframe loaded")
  }
</script>

<iframe onload="frameload()" src=...>

Question 6

Bạn có thể sử dụng loadsự kiện của iframe để phản hồi khi iframe tải.

document.querySelector('iframe').onload = function(){
    console.log('iframe loaded');
};

Điều này sẽ không cho bạn biết liệu nội dung chính xác được tải hay không: Để kiểm tra điều đó, bạn có thể kiểm tra contentDocument.

document.querySelector('iframe').onload = function(){
    var iframeBody = this.contentDocument.body;
    console.log('iframe loaded, body is: ', body);
};

Việc kiểm tra contentDocumentsẽ không hoạt động nếu iframe srctrỏ đến một miền khác với nơi mã của bạn đang chạy.

Question 7

Tôi không chắc liệu bạn có thể phát hiện ra nó đã được tải hay chưa, nhưng bạn có thể kích hoạt một sự kiện sau khi tải xong:

$(function(){
    $('#myIframe').ready(function(){
        //your code (will be called once iframe is done loading)
    });
});

CHỈNH SỬA: Như Jesse Hallett đã chỉ ra, điều này sẽ luôn kích hoạt khi iframeđã được tải, ngay cả khi nó đã có. Vì vậy, về cơ bản, nếu iframeđã được tải, lệnh gọi lại sẽ thực thi ngay lập tức.

Question 8

trong trường hợp của tôi, đó là một khung gốc chéo và đôi khi không tải. giải pháp phù hợp với tôi là: nếu nó được tải thành công thì nếu bạn thử mã này:

var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);

nó sẽ không cho phép bạn truy cập contentDocumentvà gây ra lỗi cross-origin, tuy nhiên, nếu frame không được tải thành công thì nó contentDocumentsẽ trả về một #documentđối tượng

Question 9

Khi một iFrame tải, ban đầu nó chứa #document, vì vậy việc kiểm tra trạng thái tải có thể hoạt động tốt nhất bằng cách kiểm tra những gì hiện có ..

if ($('iframe').contents().find('body').children().length > 0) {
    // is loaded
} else {
    // is not loaded
}

Question 10

Tôi có một mẹo hoạt động như sau: [chưa thử nghiệm trình duyệt chéo!]

Xác định trình xử lý sự kiện onload của iframe được xác định là

$('#myIframe').on('load', function() {
    setTimeout(function() {
        try {
            console.log($('#myIframe')[0].contentWindow.document);
        } catch (e) {
            console.log(e);
            if (e.message.indexOf('Blocked a frame with origin') > -1 || e.message.indexOf('from accessing a cross-origin frame.') > -1) {
                alert('Same origin Iframe error found!!!');
                //Do fallback handling if you want here
            }
        }
    }, 1000);

});

Mở rộng đoạn mã

Tuyên bố từ chối trách nhiệm: Nó chỉ hoạt động cho các tài liệu IFRAME CÙNG GỐC.

Question 11

Một phương pháp thực sự tuyệt vời là sử dụng jQuery AJAX. Khung cha sẽ trông như thế này:

<iframe src="iframe_load.php" style="width: 100%; height: 100%;"></iframe>

Tệp iframe_load.php sẽ tải thư viện jQuery và một JavaScript cố gắng tải URL đích trong AJAX GET:

var the_url_to_load = "http://www.your-website.com" ;
$.ajax({
            type: "GET",
            url: the_url_to_load,
            data: "",
            success: function(data){
                // if can load inside iframe, load the URL
                location.href = the_url_to_load ;
            },
            statusCode: {
                500: function() {
                    alert( 'site has errors' ) ;
                }
            },
            error:function (xhr, ajaxOptions, thrownError){
                // if x-frame-options, site is down or web server is down
                alert( 'URL did not load due to x-frame-options' ) ;
            } });

QUAN TRỌNG Đích đến phải chứa tiêu đề "Access-Control-Allow-Origin". Ví dụ trong PHP:

HEADER( "Access-Control-Allow-Origin: *" ) ;

Question 12

Nếu bạn cần biết khi nào iframe sẵn sàng thao tác, hãy sử dụng một khoảng thời gian. Trong trường hợp này, tôi "ping" nội dung cứ sau 250 mili giây và nếu có bất kỳ nội dung nào bên trong iframe mục tiêu, hãy dừng "ping" và làm điều gì đó.

var checkIframeLoadedInterval = setInterval( checkIframeLoaded, 250 );

function checkIframeLoaded() {
    var iframe_content = $('iframe').contents();

    if (iframe_content.length > 0) {
        clearInterval(checkIframeLoadedInterval);

        //Apply styles to the button
        setTimeout(function () {
            //Do something inside the iframe 
            iframe_content.find("body .whatever").css("background-color", "red");
        }, 100); //100 ms of grace time
    }
}

Question 13

Nếu bạn đang lưu trữ trang và iframe trên cùng một miền, bạn có thể nghe Window.DOMContentLoadedsự kiện của iframe . Trước tiên, bạn phải đợi trang gốc kích hoạt DOMContentLoaded, sau đó đính kèm trình xử lý DOMContentLoadedsự kiện trên iframe củaWindow .

Cho bạn có một iframe như sau,

<iframe id="iframe-id" name="iframe-name" src="..."></iframe>

đoạn mã tiếp theo sẽ cho phép bạn tham gia vào DOMContentLoadedsự kiện của iframe :

document.addEventListener('DOMContentLoaded', function () {
    var iframeWindow = frames['iframe-name'];
    // var iframeWindow = document.querySelector('#iframe-id').contentWindow
    // var iframeWindow = document.getElementById('iframe-id').contentWindow

    iframeWindow.addEventListener('DOMContentLoaded', function () {
        console.log('iframe DOM is loaded!');
    });
});