Response title
This is preview!
Dialog Issue: Iframes break in IE9
in Using jQuery UI
•
12 years ago
We ran into a problem with IE9 and IFrames, using Dialog that others are bound to run into. If you have an IFrame inside a Dialog's content, and IE9 is in standards mode, it will break.
This is because Dialog moves its content from wherever its rendered in the DOM, to a first-child of the Body tag. This is (nicely) done to avoid z-index stacking order issues that can occur with IE9 (quirks mode), and below. IE8 and IE9 (in standards mode), however, do not have the z-index stacking bug.
The problem is that IE9 in standards mode eliminates "built-in APIs, including JavaScript and DOM APIs" if an Iframe is moved after it's been parsed. They do this to combat a potential memory leak.
Since Dialog always moves its content, this essentially means if you want to guarantee cross-browser support, you cannot safely have IFrames inside Dialog content.
The solution I propose is as follows - only move UI components within the DOM if necessary.
This would mean something like this...
(1) Add "SafeZIndexStacking" to jQuery feature detection (jQuery.support.safeZindexStacking)
(2) If the rendering browser supports proper z-Index stacking, don't move the content
(3) If the rendering browser does NOT support proper z-Index stacking, move the content
(4) Also allow the initializer to accept a selector specifying where the widget should be placed (this would be nice to get it inside the <form> tag for .NET webforms support).
I'd welcome other suggestions/ideas too.
Below is a sample of what IE does. Add this to a document that you can view in IE9 standards mode:
<div id="before">
<iframe id="iframe" src="http://www.microsoft.com"></iframe>
</div>
<div id="after"></div>
<script type="text/javascript">
//uncomment code below in IE9 standards mode to see error
//document.getElementById("after").appendChild(document.getElementById("iframe"));
</script>
<iframe id="iframe" src="http://www.microsoft.com"></iframe>
</div>
<div id="after"></div>
<script type="text/javascript">
//uncomment code below in IE9 standards mode to see error
//document.getElementById("after").appendChild(document.getElementById("iframe"));
</script>
3