html – Alternative to iFrames with HTML5

html – Alternative to iFrames with HTML5

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

• <iframe> An iframes content lives entirely in a separate context than your page. While thats mostly a great feature and its 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.

You can use object and embed, like so:

<object data=http://www.web-source.net width=600 height=400>
    <embed src=http://www.web-source.net width=600 height=400> </embed>
    Error: Embedded data could not be displayed.
</object>

Which isnt new, but still works. Im not sure if it has the same functionality though.

html – Alternative to iFrames with HTML5

No, there isnt an equivalent. The <iframe> element is still valid in HTML5. Depending on what exact interaction you need there might be different APIs. For example theres the postMessage method which allows you to achieve cross domain javascript interaction. But if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframe stays as a good way to do.