10

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.

XwipeoutX
  • 4,765
  • 4
  • 29
  • 41
  • possible duplicate of [Will an iframe render in quirks mode?](http://stackoverflow.com/questions/3717932/will-an-iframe-render-in-quirks-mode) – GolezTrol Sep 17 '12 at 21:35
  • 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 Sep 17 '12 at 21:37
  • Here's a tip on how to at least fix any CSS problems due to this issue. Doesn't fixs the quirks-mode, though. http://css-tricks.com/ie-iframe-quirksmode/ – GolezTrol Sep 17 '12 at 21:41
  • @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 Sep 17 '12 at 22:05
  • Maybe you can use a library like this http://code.google.com/p/svgweb/ (flash) or this http://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 Sep 17 '12 at 22:09
  • Just for Sh*ts and giggles, have you tried putting the document in an Iframe in another iframe (nested) inside the quirks document? Wouldn't know why that would work, but I've been surprised by workarounds like that more than once. ;) – GolezTrol Sep 17 '12 at 22:12
  • Yeah, no luck there - I believe the problem is IE only supports 1 rendering mode per tab, so nesting does nothing. I'm looking into the tag now, it's looking pretty hopeful actually – XwipeoutX Sep 17 '12 at 22:21
  • Allright! If that turns out to be a solution, please post it as an answer to this question, so there's finally a work-around for this issue. :) – GolezTrol Sep 18 '12 at 08:30

1 Answers1

7

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

XwipeoutX
  • 4,765
  • 4
  • 29
  • 41
  • Can you expand? Works fine for me. – XwipeoutX Feb 21 '13 at 03:58
  • In IE10, what happens with the solution? The iframe solution in IE10 seems to render the parent as Quirks and the inner as IE10 Standard mode, which is what you wanted, I think. – Scott Stafford May 03 '13 at 21:30
  • Sorry for slow reply. I didn't get this behaviour - see http://stevesspace.com/test/quirks/parent-is-ie8_child-is-object-modern-detection.html . Note IE10 switched browser mode if the parent page is Quirks, but not if it's IE8... – XwipeoutX May 27 '13 at 01:43
  • Using the OBJECT instead of IFRAME solved my rendering mode issue. But the OBJECT tag does dot have a `contentWindow` field while the IFRAME tag does. Thus, [I can't use the `postMessage API`](http://stackoverflow.com/questions/13830884/postmessage-into-object-tag) – Julien Kronegg Jan 22 '14 at 14:23
  • after hours of trying to render the main page as IE8 (to keep old js code) and a iframe as IE9 (to show a svg) i found this object tag here. this worked great for my needs, while iframe sucked hard in IE. – A. Binzxxxxxx Oct 02 '14 at 16:46