Is it possible to reuse HTML like a template on multiple pages?
So, after a long time I actually found a way to do this using AJAX. HTML Imports are a great solution, but the support across browsers is severely lacking as of 04/2017, so I came up with a better solution. Here's my source code:
function HTMLImporter() {}
HTMLImporter.import = function (url) {
var error, http_request, load, script;
script =
document.currentScript || document.scripts[document.scripts.length - 1];
load = function (event) {
var attribute, index, index1, new_script, old_script, scripts, wrapper;
wrapper = document.createElement("div");
wrapper.innerHTML = this.responseText;
scripts = wrapper.getElementsByTagName("SCRIPT");
for (index = scripts.length - 1; index > -1; --index) {
old_script = scripts[index];
new_script = document.createElement("script");
new_script.innerHTML = old_script.innerHTML;
for (index1 = old_script.attributes.length - 1; index1 > -1; --index1) {
attribute = old_script.attributes[index1];
new_script.setAttribute(attribute.name, attribute.value);
}
old_script.parentNode.replaceChild(new_script, old_script);
}
while (wrapper.firstChild) {
script.parentNode.insertBefore(
wrapper.removeChild(wrapper.firstChild),
script
);
}
script.parentNode.removeChild(script);
this.removeEventListener("error", error);
this.removeEventListener("load", load);
};
error = function (event) {
this.removeEventListener("error", error);
this.removeEventListener("load", load);
alert("there was an error!");
};
http_request = new XMLHttpRequest();
http_request.addEventListener("error", error);
http_request.addEventListener("load", load);
http_request.open("GET", url);
http_request.send();
};
Now when I want to import HTML into another document, all I have to do is add a script tag like this:
<script>HTMLImporter.import("my-template.html");</script>
My function will actually replace the script tag used to call the import with the contents of my-template.html
and it will execute any scripts found in the template. No special format is required for the template, just write the HTML you want to appear in your code.
Reuse html in different pages
Ok, so for me google tag manager is good. I can add custom html, and it goes onto all of my pages.
Creating reusable html for navigation bar on multiple pages
Like it's been said, typically this is done server side with an include for non AJAX sites. However, I think you can make use of google closure templates. Basically, you define a template in their templating language, that generates a javascript function you can call to render your HTML.
http://code.google.com/closure/templates/docs/helloworld_js.html
Example:
--templates.soy
{namespace templates}
{template .nav}
<ul id="navbar">
<li><a href="biosketch.html">Biosketch</a></li>
<li><a href="projects.html">Class Projects</a>
<ul>
<li><a href="projects.html#SeniorProject">Senior Project</a></li>
<li><a href="projects.html#WindTurbine">Wind Turbine</a></li>
</ul>
</li>
<li><a href="#">Resume</a></li>
<li><a href="#">Work Experience</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
{\template}
Then you run the following command to compile it into a javascript function
java -jar SoyToJsSrcCompiler.jar --outputPathFormat templates.js templates.soy
This will generate a file called templates.js containing a function called templates.nav which you can call from your page like the following:
document.getElementById('navbar').innerHTML = templates.nav();
This is not even using the data merging, which would allow you to pass in a data object to render HTML that is not static. But I've only shown you this since it's all you asked for. I know you could just paste the html into a JS string also, but you's have to deal with the lack of syntax help from your editor.
The one drawback is that this requires JS which you don't seem to mind. However, if you wanted to support JS-less clients, you could generate the template on the server side. There is also a compiler that generates Java google closure methods. You can look for it on their website.
Hope it helps.
Create a reusable template which can be used on various pages
You can create a component ex.: CreatedTimeComponent
created-time.component.ts
@Component({
selector: 'app-created-time',
templateUrl: './created-time.component.html',
styleUrls: ['./created-time.component.scss']
})
export class CreatedTimeComponent {
Input()
createdTime: Date;
}
created-time.component.html
<ng-container *ngIf="createdTime; else notAvailable">
<span>
{{createdTime | date:'medium'}}
</span>
</ng-container>
<ng-template #notAvailable>
<span class="text-muted f-12">N/A</span>
</ng-template>
some-other.component.html
<h2>My some other component<h2>
<app-created-time [createdTime]="item.createdTime"></app-created-time>
Related Topics
CSS Animation from Left to Right
HTML Span Align Center Not Working
How to Color Table Columns Using CSS Without Coloring Individual Cells
How to Get Rid of an Element's Offset Using CSS
Indent Starting from The Second Line of a Paragraph with CSS
How to Add Placeholder in Div Tag
Improving CSS3 Transition Performance
CSS Vertically Align Floating Divs
Chrome Slow Scrolling with Fixed Position Elements
How to Center a Checkbox in a Table Cell
How to Make The HTML Link Activated by Clicking on The <Li>
Unicode Character as Bullet for List-Item in CSS
Vertically-Aligned Inline-Block Element Not Perfectly Centered Within Container
Assign Variables to Child Template in {% Include %} Tag Django