Precondition:
I have an aspx-page with iframe inside. This iframe points to the url handled by MVC on the same site (it's hybrid site, both standard ASP.NET and ASP.NET MVC). The resulting page rendered by MVC contains a lot of scripts references.
Problem:
IE9 throws an exception on every single script it load in iframe. These exceptions are similar to this one:
Error: 'Function' is undefined
That is, it says that the most basic things every window has is somehow absent. Once you clicked through all of these popups, the page just works as designed!
If I load a URL from <iframe /> src attribute in the browser directly, everything works as expected.
If I open the page in another browser (I tried Opera, Firefox), everything works as expected -- no errors.
So, what IE9 wants?
Source: Tips4all, CCNA FINAL EXAM
There is this msdn page about this bug (or feature).
ReplyDeleteYou get these kinds of errors when you move the iframe element around in DOM. In such cases, IE 9 garbage collects the iframe (causing your undefined bug) and reloads it at another position.
In general, you should create the element, set its src attribute only once and then put it somewhere in the DOM tree once. It has nothing to do with the code which runs in the iframe itself.
I have encountered this same situation in the wild. Basic symptoms:
ReplyDeleteYou load script code in an iframe
The script code runs early (from the head section or top of body)
IE complains about some missing native object
I found that it can often be prevented by delaying the execution of the script code until onload or DOMContentLoaded... Not much help I know but this is one of the most difficult IE scripting bugs I have ever encountered. I upped the score of your question, hope it will be found by others as well and we can get a more detailed answer.
Also see this question:
Error in Internet Explorer 9 (not earlier versions or other browsers) when including jQuery in an iframe
Any more ideas of how to fix this annoying issue.
ReplyDeleteI've tried everything suggested above but it still can't get it to work in IE9.
To demonstrate, i tried loading all javascript files after the complete webpage is loaded like this =>
Put this piece of code at the top of my page:
<script type="text/javascript">
var filesadded = "";
function checkloadjsFile(filename) {
if (filesadded.indexOf("[" + filename + "]") == -1) {
loadjsFile(filename);
filesadded += "[" + filename + "]";
}
}
function loadjsFile(filename) {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = filename;
headID.appendChild(newScript);
}
function setScripts() {
// Set javascript reference to jquery
checkloadjsFile("/Scripts/jquery-1.7.1.min.js");
checkloadjsFile("/Scripts/jquery-ui-1.8.11.min.js");
checkloadjsFile("/Scripts/jquery.unobtrusive-ajax.min.js");
checkloadjsFile("/Scripts/filter.js");
checkloadjsFile("/Scripts/jquery.dataTables.min.js");
checkloadjsFile("/Scripts/customScript.js");
}
</script>
Put this piece of code at the bottom of my page:
<script type="text/javascript">
//call after page loaded
window.onload = setScripts();
</script>
To ensure that my scripts are loaded when the page is loaded.
I also tried the approach that "copy" proposed (set source only once on frame object), but nothing solved my problem.
I load my iframe in a jquiry ui modal popup. Just can't find any solution. Anyone?
Placing the following script block at the very top of the iFrame html <head> seems to resolve the issue in my case. Basically, it forces the iframe to reload, which as some have pointed out, solves the issue. It seems relatively safe, because, without things like 'Object' and 'Date', javascript is essentially useless.
ReplyDelete<script type="text/javascript">
if(typeof(Object)==="undefined"){
window.location.reload();
}
</script>
Further investigation revealed that the solution is to add the offending iframe to it's dom location BEFORE setting the 'src' attribute.
ReplyDeleteOnce the 'src' has been set, changing location of the iframe within the DOM stack forces IE9 to garbage collect it.
Once 'src' has been set, iframe can be resized and changed via css positioning, but cannot change the relative location in the DOM stack.
Often times, plugins like dialogs and lightboxes will stuff an iframe with src already set into the dom, then append / prepend or whatever, triggering the GC to take place.