Is there any conflict when adding an whose content is HTML4 into a HTML5 web page?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2011-11-03T09:18:10.343" class="fromnow">Nov 03 '11 at 09:18</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2011-11-03T10:02:44.877" datetime="2011-11-03T10:02:44.877">Nov 03 '11 at 10:02</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,381 times"> <span class="fc-light mr2">Viewed</span> 1,381 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="7992482" data-ownerid="797301" data-score="3"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7992482"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I want to add an <code><iframe></code>, 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?</p> <p>Will the browser encounter any errors when facing some special situation because the source types of the documents are different?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/html4" class="post-tag js-gps-track" title="show questions tagged 'html4'" rel="tag">html4</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Nov 03 '11 at 10:02">edited Nov 03 '11 at 10:02</time> <a href="../../users/213269/jonas" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/213269.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jonas" /> </a> <div class="s-user-card--info"> <a href="../../users/213269/jonas" class="s-user-card--link">Jonas</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">121,568</li> <li class="s-award-bling s-award-blinggold" title="97 gold badges">97</li> <li class="s-award-bling s-award-blingsilver" title="310 silver badges">310</li> <li class="s-award-bling s-award-blingbronze" title="388 bronze badges">388</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Nov 03 '11 at 09:18">asked Nov 03 '11 at 09:18</time> <a href="../../users/797301/arthur-wu" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/797301.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Arthur Wu" /> </a> <div class="s-user-card--info"> <a href="../../users/797301/arthur-wu" class="s-user-card--link">Arthur Wu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">35</li> <li class="s-award-bling s-award-blingbronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">3 Answers<span style="display:none;" itemprop="answerCount">3</span></h2> </div> </div> </div> <a name="7992556"></a> <div id="answer-7992556" class="answer accepted-answer" data-answerid="7992556" data-ownerid="251388" data-score="3" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7992556"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>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).</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 03 '11 at 09:23">answered Nov 03 '11 at 09:23</time> <a href="../../users/251388/davide" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/251388.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Davide" /> </a> <div class="s-user-card--info"> <a href="../../users/251388/davide" class="s-user-card--link">Davide</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,329</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="14 silver badge">14</li> <li class="s-award-bling s-award-blingbronze" title="12 bronze badge">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="7992529"></a> <div id="answer-7992529" class="answer " data-answerid="7992529" data-ownerid="94197" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7992529"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>No, there won't be any conflict, assuming both pages have a <code><!DOCTYPE></code>. In fact, browsers don't even distinguish between HTML 4 and HTML 5.</p> <p>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.</p> <p>TLDR; use a <code><!DOCTYPE></code>.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2011-11-03T09:38:23.407" class="relativetime">Nov 03 '11 at 09:38</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Andy E</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 03 '11 at 09:21">answered Nov 03 '11 at 09:21</time> <a href="../../users/94197/andy-e" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/94197.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Andy E" /> </a> <div class="s-user-card--info"> <a href="../../users/94197/andy-e" class="s-user-card--link">Andy E</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">338,112</li> <li class="s-award-bling s-award-blinggold" title="86 gold badges">86</li> <li class="s-award-bling s-award-blingsilver" title="474 silver badges">474</li> <li class="s-award-bling s-award-blingbronze" title="445 bronze badges">445</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-7992529" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="7992529" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-9776992" class="comment js-comment " data-comment-id="9776992" data-comment-owner-id="19068" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment9776992_7992529"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">If one document is HTML 5 then it won't have a DTD. In HTML 5, the Doctype declaration is replaced by a magic string that triggers Standards mode.</span> – <a href="../../users/19068/quentin" title="914,110 reputation" class="comment-user ">Quentin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7992482/is-there-any-conflict-when-adding-an-iframe-whose-content-is-html4-into-a-html#comment9776992_7992529"><span title="2011-11-03T09:30:30.457 License: CC BY-SA 3.0" class="relativetime-clean">Nov 03 '11 at 09:30</span></a></span> </div> </div> </li> <li id="comment-9777043" class="comment js-comment " data-comment-id="9777043" data-comment-owner-id="94197" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment9777043_7992529"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Quentin: `<!DOCTYPE html> ` isn't a DTD? Perhaps I just have my terminology mixed up.</span> – <a href="../../users/94197/andy-e" title="338,112 reputation" class="comment-user ">Andy E</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7992482/is-there-any-conflict-when-adding-an-iframe-whose-content-is-html4-into-a-html#comment9777043_7992529"><span title="2011-11-03T09:33:55.343 License: CC BY-SA 3.0" class="relativetime-clean">Nov 03 '11 at 09:33</span></a></span> </div> </div> </li> <li id="comment-9777068" class="comment js-comment " data-comment-id="9777068" data-comment-owner-id="106224" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment9777068_7992529"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Andy E: You could say it's a doctype declaration, but it does not reference any DTD (doctype definition) file, because HTML5 doesn't have such a definition.</span> – <a href="../../users/106224/boltclock" title="700,868 reputation" class="comment-user ">BoltClock</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7992482/is-there-any-conflict-when-adding-an-iframe-whose-content-is-html4-into-a-html#comment9777068_7992529"><span title="2011-11-03T09:34:50.847 License: CC BY-SA 3.0" class="relativetime-clean">Nov 03 '11 at 09:34</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="7992687"></a> <div id="answer-7992687" class="answer " data-answerid="7992687" data-ownerid="1697" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="7992687"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>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.</p> <p>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.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2011-11-03T09:41:24.290" class="relativetime">Nov 03 '11 at 09:41</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Shadow2531</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 03 '11 at 09:34">answered Nov 03 '11 at 09:34</time> <a href="../../users/1697/shadow2531" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1697.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shadow2531" /> </a> <div class="s-user-card--info"> <a href="../../users/1697/shadow2531" class="s-user-card--link">Shadow2531</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">11,980</li> <li class="s-award-bling s-award-blinggold" title="5 gold badges">5</li> <li class="s-award-bling s-award-blingsilver" title="35 silver badges">35</li> <li class="s-award-bling s-award-bling__bronze" title="48 bronze badges">48</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-7992687" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="7992687" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-9777167" class="comment js-comment " data-comment-id="9777167" data-comment-owner-id="94197" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment9777167_7992687"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">IE doesn't have 'different rendering and JS support depending on the doctype'. Rather, no doctype will trigger quirks mode (IE 5.5) and any doctype will trigger standards mode. For instance, `<!DOCTYPE Shadow2531> ` will still trigger standards mode.</span> – <a href="../../users/94197/andy-e" title="338,112 reputation" class="comment-user ">Andy E</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7992482/is-there-any-conflict-when-adding-an-iframe-whose-content-is-html4-into-a-html#comment9777167_7992687"><span title="2011-11-03T09:41:48.897 License: CC BY-SA 3.0" class="relativetime-clean">Nov 03 '11 at 09:41</span></a></span> </div> </div> </li> <li id="comment-9777665" class="comment js-comment " data-comment-id="9777665" data-comment-owner-id="1697" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment9777665_7992687"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@AndyE In IE9+, "<!DOCTYPE HTML> " was supposed to trigger super standards mode (called IE9 standards mode for IE9) where all the new stuff (addEventListener, getElementById fixes, <video>, <audio> etc.) works. But, another doctype that triggers standards mode would just trigger regular standards mode (IE8 standards mode) where that stuff wasn't supported. I remember reading this on the IE blog. But, I just checked in IE9 on Win7 and it appears the IE team decided not to go that route and it makes all the new stuff work in what was then called regular standards mode. So, my mistake.</audio></video></span> – <a href="../../users/1697/shadow2531" title="11,980 reputation" class="comment-user ">Shadow2531</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/7992482/is-there-any-conflict-when-adding-an-iframe-whose-content-is-html4-into-a-html#comment9777665_7992687"><span title="2011-11-03T10:17:16.847 License: CC BY-SA 3.0" class="relativetime-clean">Nov 03 '11 at 10:17</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>