The first method I will discuss is one I have used since as far back as Chrome 24, Firefox 17, and even Internet Explorer 9 (IE9) — "seamless IFrames". The second technique is the one that Chrome 36 Beta has implemented — "HTML Imports". Until all browser vendors support the new HTML imports, my "old" way will still work fine.
"How to" Include HTML Files — using Seamless IFramesThis technique is probably best described by way of example code. This way to implement "include" files in HTML5 without ANY "server" works to include any file referenced by "file:\\..." addresses or relative URL addresses.
In the “container” document (i.e., the “outer” document into which you would like to import / “include” content from another HTML file):
Then, inside that external / referenced HTML file (in this example, “include.top.nav.html”), we simply include the HTML that we want to appear inside the iframe — in this case a simple reusable section of HTML with my navigation HTML code in it:
Note the use of “_top” to indicate that our navigation is going to affect the outermost document; if we omit this, the contents of the iframe will be what changes during navigation instead of the contents of the outer container document.
Let us also assume we perhaps we want to style this iframe, so in our referenced CSS file we do so — in this case I simply want to make sure it sizes to 100% of the container div's width and height:
/*Set the seamless iframe properties; size as needed to fit embedded content*/
A more complete view of the outer HTML document that includes the reusable HTML by way of the seamless iframe looks something like this:
<title>DEFAULT DOCUMENT TITLE</title>
<link rel="stylesheet" href="my_styles.css">
<iframe id="top-nav" seamless="seamless" src="include.top.nav.html" ></iframe>
<h1 class="document-name">DOCUMENT NAME HERE</h1>
"How to" Include HTML Files — using HTML Imports (rel="import" directive)This is an alternative serverless "include HTML file" method that has just recently come available in browsers like Chrome 36 (note: it has existed since Chrome 31, but you had to enable the experimental feature; now it is "on" by default). If you took a look at the Chromium Blog release notes link (above), you will see a quick overview of this new technique, and I have pasted their description and example here for quick reference:
<head> <link rel="import" href="/path/to/imports/stuff.html"> </head>
The first technique I showed (seamless iframes) can accomplish the same thing to an extent, but this new rel="import" technique is certainly the preferred way to go in the long term. I look forward to this being widely adopted (hopefully sooner rather than later), but it seems Chrome is the only game in town today. There are much "bigger picture" reasons why the rel="import" implementation is important as it is quite handy for web components packaging (something I plan to use in my SVG Dart Widgets, eventually). Search the web for more examples and have fun with either, or both, of these ways to import HTML file contents into another HTML file without the need for server-side technologies.
Continue to read this Software Development and Technology Blog for computer programming articles (including useful free / OSS source-code and algorithms), software development insights, and technology Techniques, How-To's, Fixes, Reviews, and News — focused on Dart Language, SQL Server, Delphi, Nvidia CUDA, VMware, TypeScript, SVG, other technology tips and how-to's, plus my varied political and economic opinions.