Menu
I am trying to check whether an iframe has loaded after the user clicks a button.
I have
$('#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> Any suggestions?
By the way, my iframe is created dynamically. It doesn’t load with the initial page load.
670
If you want to check if no page loaded inside iframe, and the iframe is not cross-domain you could check for the existence of the body tag inside of the iframe. If it exists, then something loaded. If the iframe is cross-domain, you will be blocked by the same-origin policy.
If you want to run JavaScript when an iframe has finished loading, you can either: include code in the iframe tag's onload attribute, or. assign code to the iframe's onload event handler property.
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>jsfiddle DEMO.
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>jsfiddle DEMO.
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 />jsfiddle DEMO.
141
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
