Alternative to iFrames with HTML5

Basically there are 4 ways to embed HTML into a web page:

An iframe’s content lives entirely in a separate context than your page. While that’s mostly a great feature and it’s the most compatible among browser versions, it creates additional challenges (shrink wrapping the size of the frame to its content is tough, insanely frustrating to script into/out of, nearly impossible to style).<br /> AJAX. As the solutions shown here prove, you can use the XMLHttpRequest object to retrieve data and inject it to your page. It is not ideal because it depends on scripting techniques, thus making the execution slower and more complex, among other drawbacks.<br /> Hacks. Few mentioned in this question and not very reliable.<br /> HTML5 Web Components. HTML Imports, part of the Web Components, allows to bundle HTML documents in other HTML documents. That includes HTML, CSS, JavaScript or anything else an .html file can contain. This makes it a great solution with many interesting use cases: split an app into bundled components that you can distribute as building blocks, better manage dependencies to avoid redundancy, code organization, etc. Here is a trivial example:<br />  <link rel="import" href="http://example.com/elements.html"> <p>Native compatibility is still an issue, but you can use a polyfill to make it work in evergreen browsers Today.<br /> You can learn more here and here.</p> <p>You can use object and embed, like so:<br /> <object data="http://www.web-source.net" width="600" height="400">Error: Embedded data could not be displayed.</object></p> <p>Which isn’t new, but still works. I’m not sure if it has the same functionality though.</p> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Related</em></h3> </div> </div><footer class="entry-footer"><p class="entry-meta"><span class="entry-categories">Filed Under: Uncategorized</span> </p></footer></article></main><aside class="sidebar sidebar-primary widget-area" role="complementary" aria-label="Primary Sidebar"><section id="search-2" class="widget widget_search"><div class="widget-wrap"><form class="search-form" method="get" action="https://www.configrouter.com/" role="search"><input class="search-form-input" type="search" name="s" id="searchform-1" placeholder="Search this website"><input class="search-form-submit" type="submit" value="Search"><meta content="https://www.configrouter.com/?s={s}"></form></div></section> <section id="recent-posts-3" class="widget widget_recent_entries"><div class="widget-wrap"> <h4 class="widget-title widgettitle">Recent Posts</h4> <ul> <li> <a href="https://www.configrouter.com/how-do-i-give-user-access-to-jenkins-34560/">How do I give user access to Jenkins?</a> </li> <li> <a href="https://www.configrouter.com/what-is-docker-volume-command-34559/">What is docker volume command?</a> </li> <li> <a href="https://www.configrouter.com/what-is-the-date-format-in-unix-34558/">What is the date format in Unix?</a> </li> <li> <a href="https://www.configrouter.com/what-is-the-difference-between-arg-and-env-docker-34557/">What is the difference between ARG and ENV Docker?</a> </li> <li> <a href="https://www.configrouter.com/what-is-rsync-command-linux-34556/">What is rsync command Linux?</a> </li> <li> <a href="https://www.configrouter.com/how-to-add-your-own-music-to-snapchat-16662/">How to Add Music to Snapchat 2021 Android? | How to Search, Add, Share Songs on Snapchat Story?</a> </li> <li> <a href="https://www.configrouter.com/how-to-turn-on-notifications-for-snapchat-16616/">How to Enable Snapchat Notifications for Android & iPhone? | Steps to Turn on Snapchat Bitmoji Notification</a> </li> <li> <a href="https://www.configrouter.com/fix-snapchat-camera-not-working-16674/">Easy Methods to Fix Snapchat Camera Not Working Black Screen Issue | Reasons & Troubleshooting Tips to Solve Snapchat Camera Problems</a> </li> <li> <a href="https://www.configrouter.com/how-to-update-snapchat-on-iphone-16646/">Detailed Procedure for How to Update Snapchat on iOS 14 for Free</a> </li> <li> <a href="https://www.configrouter.com/how-to-post-on-snapchat-spotlight-16654/">What is Snapchat Spotlight Feature? How to Make a Spotlight on Snapchat?</a> </li> <li> <a href="https://www.configrouter.com/how-to-hack-a-snapchat-account-tutorial-16685/">Snapchat Hack Tutorial 2021: Can I hack a Snapchat Account without them knowing?</a> </li> </ul> </div></section> </aside></div></div><footer class="site-footer"><div class="wrap"><p>Copyright © 2025 · <a href="http://my.studiopress.com/themes/news/">News Pro Theme</a> on <a href="https://www.studiopress.com/">Genesis Framework</a> · <a href="https://wordpress.org/">WordPress</a> · <a rel="nofollow" href="https://www.configrouter.com/wp-login.php">Log in</a></p></div></footer></div><script type="text/javascript" src="https://www.configrouter.com/wp-includes/js/comment-reply.min.js?ver=6.6.2" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="https://stats.wp.com/e-202525.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"111943956\",\"post\":\"20231\",\"tz\":\"5.5\",\"srv\":\"www.configrouter.com\",\"j\":\"1:13.7.1\"}") ]); _stq.push([ "clickTrackerInit", "111943956", "20231" ]); /* ]]> */ </script> </body></html>