Skip to Main Content

HTML Imports, Polyfills & the Impending Extinction of iFrames

Posted on 9.24.2014

iFrames have been an effective way to include external content on a website for about as long an many 'Net professional can remember, but there are quite a few drawbacks to their use (search engines can't index their content, and they can be frustratingly slow to load/render). Fortunately, there are some emerging alternatives including HTML imports that designers and developers should seriously consider using.

What HTML imports provide is a way to include external HTML documents and web components on a web page without loading an iframe (or making an Ajax request). The result is not only faster load times (typically - at least over iframes), but an opportunity to use (and reuse) existing code.

While the HTML imports technology is only a W3C working draft and isn't yet a Web standard (so it is not supported in all browsers), it can still work effectively on a Web page today by leveraging a polyfill like the one available in Polymer, a developer library that uses web technology to create custom HTML elements, or this one available on GitHub.

A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that developers/designers expect browsers to provide natively (but don't), resulting in a more uniform API landscape. For example, many features of HTML5 are not supported by versions of Internet Explorer older than 8 or 9, but can be used by Web pages if they install a pollyfill.

While the broad use of HTML imports is likely a long way off (perhaps years), it's hard to deny that Web components in general are gaining popularity. Below is a video of Google's Eric Bidelman at Google I/O on how Polymer and Web components are changing Web development.


 SUBSCRIBE FREE to Website Magazine - 12 Issues 


WebsiteMagazineMiniLogo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    
      

    The Ultimate Guide to Personalization

    Kibo