Alternative to iFrames with HTML5

Question

I would like to know if there is an alternative to iFrames with HTML5. I mean by that, be able to inject cross-domains HTML inside of a webpage without using an iFrame.

Answer 1

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

• <iframe> 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).
• 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.
• Hacks. Few mentioned in this question and not very reliable.

• 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:

  <!-- Resources on other origins must be CORS-enabled. -->
  <link rel="import" href="http://example.com/elements.html">
  

Native compatibility is still an issue, but you can use a polyfill to make it work in evergreen browsers Today.

You can learn more here and here.