Làm cách nào để phát hiện iframe được tải?

101

Tôi đang cố gắng kiểm tra xem iframe đã tải hay chưa sau khi người dùng nhấp vào nút.

Tôi có

$('#MainPopupIframe').load(function(){
    console.log('load the iframe')
    //the console won't show anything even if the iframe is loaded.
})

HTML

<button id='click'>click me</button>

//the iframe is created after the user clicks the button.
<iframe id='MainPopupIframe' src='http://...' />...</iframe>

Bất kỳ đề xuất?

Nhân tiện, iframe của tôi được tạo động. Nó không tải khi tải trang đầu tiên.

— Rouge
nguồn

Nhấp chuột

— Viktor S.

Câu trả lời:

185

Bạn có thể thử cái này (sử dụng jQuery)

$(function(){
    $('#MainPopupIframe').load(function(){
        $(this).show();
        console.log('iframe loaded successfully')
    });
        
    $('#click').on('click', function(){
        $('#MainPopupIframe').attr('src', 'https://heera.it');    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

Mở rộng đoạn mã

jsfiddle DEMO .

Cập nhật: Sử dụng thuần túyjavascript

window.onload=function(){
    var ifr=document.getElementById('MainPopupIframe');
    ifr.onload=function(){
        this.style.display='block';
        console.log('laod the iframe')
    };
    var btn=document.getElementById('click');    
    btn.onclick=function(){
        ifr.src='https://heera.it';    
    };
};

<button id='click'>click me</button>

<iframe style="display:none" id='MainPopupIframe' src='' /></iframe>

Mở rộng đoạn mã

jsfiddle DEMO .

Cập nhật: Ngoài ra, bạn có thể thử điều này (iframe động)

$(function(){
    $('#click').on('click', function(){
        var ifr=$('<iframe/>', {
            id:'MainPopupIframe',
            src:'https://heera.it',
            style:'display:none;width:320px;height:400px',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);    
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='click'>click me</button><br />

Mở rộng đoạn mã

jsfiddle DEMO .

— Alpha
nguồn

Dung dịch vani thật tuyệt.

— Nick

load()không được dùng nữa, nhưng đó chỉ là vì nó xung đột với hàm ajax. Việc thay thế được khuyến nghị là đơn giản on("load"). (Thật không may, các tài liệu không hoàn toàn làm cho rõ ràng rằng đó là tất cả các bạn cần phải làm.)

— Teepeemm

"laod the iframe" - Alpha | Thoải mái chút dưới bìa chỉnh sửa chiến tranh du kích diễn ra trong việc bảo vệ di sản: P

— Mohd Abdul Mujib

Bắt tốt @MohdAbdulMujib, bây giờ nó là một cái cổ điển :-)

— The Alpha

Tôi chưa bao giờ thấy phương pháp đó để tạo phần tử nối trước đây. LÀ YÊU, và hoàn toàn giải quyết nó cho tôi. Công việc tốt đẹp!

— hạn 2

Tôi hình dung thế này:

<html>
<head>
<script>
var frame_loaded = 0;
function setFrameLoaded()
{
   frame_loaded = 1;
   alert("Iframe is loaded");
}
$('#click').click(function(){
   if(frame_loaded == 1)
    console.log('iframe loaded')
   } else {
    console.log('iframe not loaded')
   }
})
</script>
</head>
<button id='click'>click me</button>

<iframe id='MainPopupIframe' onload='setFrameLoaded();' src='http://...' />...</iframe>

— Desislav Kamenov
nguồn

Bạn cũng có thể thử sự kiện onload;

var createIframe = function (src) {
        var self = this;
        $('<iframe>', {
            src: src,
            id: 'iframeId',
            frameborder: 1,
            scrolling: 'no',
            onload: function () {
                self.isIframeLoaded = true;
                console.log('loaded!');
            }
        }).appendTo('#iframeContainer');

    };

— Teoman shipahi
nguồn