JSFiddle - React, Tailwind, and code Playground
HTML
<a href='#'>load iframe</a>
CSS
iframe {height:300px; width:300px}
JavaScript
$('a').click(function(){
iframeLoader("http://www.msn.com", function(){ alert('done'); })
return false;
});
function iframeLoader(url,callback)
{
var bodyTag = document.body || document.getElementsByTagName("body")[0];
var iframe = document.createElement("iframe");
iframe.src = url;
if (/WebKit/i.test(navigator.userAgent))
{
bodyTag.appendChild(iframe, bodyTag.firstChild);
var _timer = setInterval(function() {
if (/loaded|complete/.test(iframe.readyState)) {
clearInterval(_timer);
callback(); // call the onload handler
}
}, 10);
}
else
{
var done = false;
// Attach handlers for all browsers
iframe.onload = iframe.onreadystatechange = function()
{
if(!done && (!this.readyState ||
this.readyState === "loaded" ||
this.readyState === "complete")
)
{
done = true;
if(typeof callback == "function") callback();
// Handle memory leak in IE
iframe.onload = iframe.onreadystatechange = null;
}
};
bodyTag.appendChild(iframe, bodyTag.firstChild);
}
}