iframe not rendering in ie9 mode when containing page is in quirks mode

10
votes

I have an iframe in a page that runs in quirks mode (I don't have control over the containing page), and I need my page to render in a mode that is compatible with modern browser features.

The contained page makes heavy use of newer JavaScript features (especially the nice array functions), and SVG rendering. While I can shim the array functions easily enough, I can't force the svg to render.

To be clear, the inner page is NOT running in quirks mode - I have specified a doctype and the ie=edge < meta > tag. It looks like it's using the ie8 rendering mode (hard to be certain)

A sample of the issue is here: http://stevesspace.com/quirks/quirks.html - load it up in chrome to see the expected output, and check it in IE9 or 10 for the actual output.

EDIT: I've added the document mode and compatibility mode to the sample, I can confirm it's using IE8 doc mode.

1
javascripthtmliframeinternet-explorer-9quirks-mode
possible duplicate of Will an iframe render in quirks mode? - GolezTrol
Apparently the doc type is inherited since IE9. And your test is correct: the page turns red inside the IFrame, but not when you open it outside the IFrame (IE) or at all in Chrome. Now how to solve it... I don't know. :-/ Good question with nice evidence, though. - GolezTrol
Here's a tip on how to at least fix any CSS problems due to this issue. Doesn't fixs the quirks-mode, though. css-tricks.com/ie-iframe-quirksmode - GolezTrol
@GolezTrol I had a good look at that question - my problem is actually the inverse of it though. The iframe isn't running in quirks mode - it's running in IE8 mode. The doctype/meta tag is supposed to fix that, but doesn't. I'm fine with having to shim all the JS features I can, but the SVG support is quite critical, and that can't be shimmed. - XwipeoutX
Maybe you can use a library like this code.google.com/p/svgweb (flash) or this code.google.com/p/svg2vml (svg->vml) to render the graphics in a different way in such cases. It starts getting icky, but I wouldn't know what else. I can find the problem (and the 'reverse problem') in many places, but nothing that leads to a solution. - GolezTrol

1 Answers

7
votes

I ended up using an object tag instead of an iframe, it seems to work ok across modern browsers.

<object type="text/html" data="http://example.com"></object>

It turns out you can't modify the URL using javascript in IE9, but that's not a big deal - removing/adding a new object element works just as well for this.

Update: This tag can also be in an intermediate page that the iframe points to and it all works fine Update 2: This solution does not work in IE10