How can I detect whether an iframe is loaded?
You may try this (using 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>Update: Using plain javascript
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>Update: Also you can try this (dynamic iframe)
$(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 />
I imagine this like that:
<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>
You can try onload event as well;
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'); };