Is there any conflict when adding an <iframe> whose content is HTML4 into a HTML5 web page?

Question

I want to add an <iframe>, whose source is HTML 4, into a HTML 5 web page. Are there any JavaScript or DOM conflicts that I should be aware of when doing so?

Will the browser encounter any errors when facing some special situation because the source types of the documents are different?

Answer 1

Not at all, you can consider an iframe as a browser window open in your current page. If the browser is able to properly render the HTML4 page on a normal tab, it will have no problem in an iframe as well (with some limitation which is not related to HTML4/5 anyway).

Answer 2

No, there won't be any conflict, assuming both pages have a <!DOCTYPE>. In fact, browsers don't even distinguish between HTML 4 and HTML 5.

More specifically, without a DOCTYPE a page will be rendered in quirks mode which can result in several major differences. In Internet Explorer, for example, the page will be rendered by an older implementation of the engine, resulting in several DOM and JS (as well as layout differences). If you're using JS to manipulate one frame from the other, then there's a chance something doesn't work the way you expect it to — the way it would in standards mode.

TLDR; use a <!DOCTYPE>.

Answer 3

For IE, which has different rendering and JS support depending on the doctype, if the framed page is on the same domain and the HTML5 parent calls methods on elements in the framed page, the available methods will be limited to the old stuff. For example, addEventListener() probably won't be available on window, document and elements in the framed page.

So, just because the HTML5 page has support for all kinds of new stuff, that doesn't mean you can use its environment to call those functions on objects in a non-HTML5, framed page.