Most of
us are familiar with <script src> which we use in loading
JavaScript, <link rel="stylesheet"> for CSS, <img> for
images, <video> for videos, and <audio> for audios. But we
don't have a more declarative way to load HTML. Whilst It's possible to
load HTML with iframes element or the JavaScript method XMLHttpRequest(). HTML imports provide a much cleaner way to load
self-contained components into web pages.
HTML Import is an exciting new HTML5 feature that allow us to include an HTML file into another HTML file. You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an .html file can contain.
Sponsored link: wifi in Valencia for tourists
The Markup
The <link> tag is a blessing. We can easily embed stylesheets and JavaScripts needed in multiple documents with it. But instead of using rel="stylesheet", we add the <link> tag, then we add the value import to the rel attribute. Using href we attach the URL of the HTML file.
<head>
<link rel="import" href="external.html"/>
</head>
<link rel="import" href="external.html"/>
</head>
With that a line of code, you can load the whole world if it happens to be wrapped-up in an HTML file. Should the file to be imported contain further style or script elements, these will be imported as well.
Note: If you wish to import an HTML document from an external domain, you need to make sure It's CORS-enabled.
Accessing Contents of the Import File
HTML imports doesn't work like PHP #includes. The imported HTML file is loaded by the browser and stored behind the scenes. You can then add the contents of the import document to your web page using JavaScript.
Note: This rule only applies to HTML content. Any CSS or JavaScript code will be loaded by the browser and applied to the main document automatically.
var getImport = document.quearySelector('link[rel=import]');
The above code will select all link tag with the rel="import" attribute. There might be a situation whereby you have multiple imported HTML files in your head section and you want to select a specific link tag, you will need to give that link tag an id. Below is an example:
<link rel="import" href="external.html" id="external-file">
Here we’ve added a simple <link> element to the <head> of our main document that references the HTML file (external.html). We’ve also added an id to the tag that will help us to reference the element using JavaScript.
Now we can access the specific link tag by passing in the id we gave the imported file.
var getImport = document.querySelector('#external-file');
Further example
Let's say we are importing form.html and it contains:
<div class="valid">
<style>
h3 {
color : green;
}
</style>
<h3> Welcome! </h3>
<p> Thank you. </p>
</div>
<div class="invalid">
<style>
h3 {
color : red;
}
</style>
<h3> Error! </h3>
<p> You have entered an invalid data, please try again. </p>
</div>
<style>
h3 {
color : green;
}
</style>
<h3> Welcome! </h3>
<p> Thank you. </p>
</div>
<div class="invalid">
<style>
h3 {
color : red;
}
</style>
<h3> Error! </h3>
<p> You have entered an invalid data, please try again. </p>
</div>
Note: <style> don't need to be added explicitly. This is a major difference between HTML Imports and <iframe>.
After the file is selected, we can grab a specific portion of the document. We can select content with class valid, like so:
var el = content.querySelector( '.valid' );
Now we can append the content within the body using the JavaScript appendChild() method.
document.body.appendChild(el.cloneNode( true));
The boolean parameter (set here to true) specifies that the browser should also clone any descendent nodes within the contents.
Browser support
At the time of writing this post, this feature works only in Chrome and you will need to enable it manually - go to the chrome://flags page, enable the Enable HTML Imports option, then restart Chrome.
You can check to see if the user’s browser supports HTML imports by looking for the import property on the <link> element.
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// HTML imports are supported!
} else {
// HTML imports are not supported.
}
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// HTML imports are supported!
} else {
// HTML imports are not supported.
}
Other browsers can make use of a polyfill, which emulates HTML Imports in unsupported browsers.
That’s it! You now know how to use HTML imports and templates to create dynamic web pages.
Subscribe For Free Updates!
*Please confirm the email sent to your inbox after clicking "Sign Up!".
Subscribe RSS
Follow us on Facebook
Follow us on Twitter
Circle us on Google+
Connect on LinkedIn
Follow us on Pinterest
Connect on StumbleUpon
I would say the biggest problem with that is it only works in Chrome. Using jquery, this works in all browsers:
ReplyDelete$.ajax({
type: 'POST',
url: 'url-to-the-html-file.html',
dataType: 'html'
}).
done(function(data) {
$('body').append(data);
});
very nice!
DeleteOr the jQuery one liner.
ReplyDelete$('#mydiv').load('/this/file.html');
Happy Independence Day India
ReplyDeleteIndependence Day Wallpapers
Happy Independence Day
iPhone have a line of smartphones designed and marketed by Apple Inc.Now to use Iphone 7 without any Problem and restrictions imposed by Iphone's IOS.
ReplyDeleteYou can Download iPhone 7 Jailbreak from CydiaNerd
The usage of the video streaming applications has increased exponentially with the emergence of the smartphones in the last decade. And when we are talking about the streaming applications, Vidmate is the undisputed king in this genre. Want to know more about Vidmate? Check out this website: Vidmate for BlackBerry
ReplyDeletegolden goose
ReplyDeletenike off white
nmd
nike max
goyard handbags
moncler
supreme hoodie
air max 97
bape clothing
off white clothing
Sourcethis hyperlink this contact formthis article his comment is herewebsite here
ReplyDeleteCheck This Out best replica bags this post Ysl replica handbags more tips here luxury replica bags
ReplyDelete