I am creating an iframe with jquery by giving it a src but it is not working in IE8.
$("#DB_window").append("<iframe frameborder='0' hspace='0' style='width:100%;height:100%;' src='"+urlNoQuery[0]+"' id='DB_iframeContent' name='DB_iframeContent"+Math.round(Math.random()*1000)+"' onload='db_showIframe()'> </iframe>");
It makes a request but request is aborted so I changed it and tried accessing it with ajax
$("#DB_window").append("<iframe frameborder='0' hspace='0' style='width:100%;height:100%;' data-src='"+urlNoQuery[0]+"' id='DB_iframeContent' name='DB_iframeContent"+Math.round(Math.random()*1000)+"' onload='db_showIframe()'> </iframe>");
And make an ajax call to get the content
var iframe = $("#DB_window").children('iframe');
$.ajax({
url: iframe.data("src"),
// dataType : "text/html",
success: function(content) {
iframe.html(content);
}
});
But in the IE8 it only requests for the "src"
url and doesn't requests for the css and js references in the page. So the iframe is not rendered properly, it comes only with data and thus have no styling with it. How can we request for iframe in IE.
Iframe request was getting aborted in IE with the first case. So I came to know that IE does this when you attempt to modify a DOM element before it is closed. This means that if you try and append a child element to another and that other element (like the document.body
) is still loading, you’ll get this error. This will occur if you use .appendChild
etc.
So I used setTimeout
and it worked for me.
setTimeout(function(){
$("#DB_window").append(...
},2000);