Include HTML Files In HTML by Reference Without Any Server Technology
I have meant to write a blog about this for quite some time, and the newest Chrome 36 Beta release notes reminded me to do so now that yet another way of including HTML files within HTML files (without any particular server requirement and without JavaScript) exists — i.e., you do not need ASPX and you do not need PHP or other server-side technology, and you do not need JavaScript.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 IFrames
This 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):
<div class="content">
<iframe id="top-nav" seamless="seamless" src="include.top.nav.html" ></iframe>
</div>
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:
<div id="topnav">
<a href="some-page-to-navigate-to.html" target="_top">link to home page</a>
</div>
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*/
#top-nav {
width: 100%;
height: 100px;
}
A more complete view of the outer HTML document that includes the reusable HTML by way of the seamless iframe looks something like this:
<html>
<head>
<title>DEFAULT DOCUMENT TITLE</title>
<link rel="stylesheet" href="my_styles.css">
<meta charset=utf-8>
</head>
<body>
<div class="content">
<iframe id="top-nav" seamless="seamless" src="include.top.nav.html" ></iframe>
<h1 class="document-name">DOCUMENT NAME HERE</h1>
<p>Paragraph...</p>
</div>
</body>
</html>
Hopefully this was somewhat easy to follow. Try it out. This technique came in super-handy for a local HTML-Based WIKI I created that did not require any web-server to run. I can access the WIKI pages from Chrome, Firefox, and IE and the included HTML file(s) work just fine with no web server and no dynamic language or dynamic web-page technology.
"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:
HTML Imports
HTML Imports, part of the Web Components standards umbrella, offer a way to include HTML documents in other HTML documents using
<link rel="import">:<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
An HTML Import can contain CSS, JavaScript, HTML, or anything else an .html file can include. This means they provide a convention for bundling related HTML/CSS/JS (even other HTML Imports) into a single package, making them a fantastic tool for delivering Web Components to users.
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.
