Skip to content

Instantly share code, notes, and snippets.

@jaw111

jaw111/import.html

Last active August 29, 2015 14:23
Show Gist options
  • Save jaw111/8b70c4d02c0cccbc96a2 to your computer and use it in GitHub Desktop.
Save jaw111/8b70c4d02c0cccbc96a2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
import.html
<template id="footer">
<div class="container-fluid">
<div class="contact">
<h2 class="contact__title">Contact us</h2>
<p class="contact__text"><strong>Semaku B.V.</strong> SFJ4.009 Gebouw Videolab | Torenallee 20, 5617BC Eindhoven | <a href="mailto:[email protected]">[email protected]</a></p>
<ul class="social__icons">
<li><a href="https://twitter.com/semaku"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="https://www.linkedin.com/company/semaku"><i class="fa fa-linkedin fa-2x"></i></a></li>
<li><a href="https://github.com/semaku"><i class="fa fa-github fa-2x"></i></a></li>
</ul>
</div>
</div>
</template>
Raw
index.html
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="import" href="import.html">
</head>
<body>
<div id="container"></div>
<footer class="footer">
<p>Some placeholder</p>
</footer>
<script>
var link = document.querySelector('link[rel="import"]');
var container = document.querySelector('.footer');
container.innerHTML = ''; // clear out.
// Clone the <template> in the import.
var template = link.import.querySelector('#footer');
var clone = document.importNode(template.content, true);
container.appendChild(clone);
</script>
</body>
</html>
Raw
index_2.html
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div id="container"></div>
<footer class="footer">
<p>Some placeholder</p>
</footer>
<script>
xhr = new XMLHttpRequest();
xhr.open('GET', 'import.html', true);
xhr.responseType = 'document';
xhr.onload = function(e) {
var doc = e.target.response;
var container = document.querySelector('.footer');
container.innerHTML = ''; // clear out.
var template = doc.querySelector('#footer');
var clone = document.importNode(template.content, true);
container.appendChild(clone);
};
xhr.send();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment