Bagaimana cara mendeteksi apakah iframe dimuat?

101

Saya mencoba untuk memeriksa apakah iframe telah dimuat setelah pengguna mengklik tombol.

saya sudah

$('#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>

Ada saran?

Ngomong-ngomong, iframe saya dibuat secara dinamis. Itu tidak dimuat dengan pemuatan halaman awal.

javascript jquery html iframe Rouge
sumber
Klik
Viktor S.

Jawaban:

185

Anda dapat mencoba ini (menggunakan 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>
Luaskan cuplikan

jsfiddle DEMO .

Pembaruan: Menggunakan biasajavascript

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>
Luaskan cuplikan

jsfiddle DEMO .

Pembaruan: Anda juga dapat mencoba ini (iframe dinamis)

$(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 />
Luaskan cuplikan

jsfiddle DEMO .

Alfa
sumber
2
Solusi vanilla luar biasa.
Nick
22
load()tidak digunakan lagi, tapi itu hanya karena bertentangan dengan fungsi ajax. Pengganti yang disarankan sederhana on("load"). (Sayangnya, dokumen tidak menjelaskan dengan jelas bahwa hanya itu yang perlu Anda lakukan.)
Teepeemm
1
"laod the iframe" - The Alpha | Perang gerilya pengeditan under-cover kecil yang bagus terjadi untuk melindungi warisan: P
Mohd Abdul Mujib
1
Tangkapan bagus @MohdAbdulMujib, sekarang klasik :-)
The Alpha
1
Saya belum pernah melihat metode itu untuk membuat elemen tambahan sebelumnya. IS LOVELY, dan benar-benar menyelesaikannya untuk saya. Kerja bagus!
indextwo
3

Saya membayangkan ini seperti itu:

<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
sumber
2

Anda juga dapat mencoba acara 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
sumber