是否可以在多个页面上像模板一样重用HTML? [英] Is it possible to reuse HTML like a template on multiple pages?
问题描述
我在网站上有几个页面，每个页面使用相同的标题.我想知道是否有某种方法可以简单地用html引用文件中的标头，就像下面的伪代码一样:
I have several pages on a website that use the same header for each page. I was wondering if there was some way to simply reference a file with the html for the header sort of like in this pseudo code:
<!-- Main Page -->
<body>
<html_import_element src = "myheadertemplate.html">
<body>
然后在一个单独的文件中:
Then in a separate file:
<!-- my header template html -->
<div>
<h1>This is my header</h1>
<div id = "navbar">
<div class = "Tab">Home</div>
<div class = "Tab">Contact</div>
</div>
</div>
这样，我可以只编写一次html头文件，并通过编写一个简单的标签将其导入到我需要的每个页面中.这可能吗?我可以使用XML做到这一点吗?
This way I could write the header html once and just import it in each of my pages where I need it by writing one simple tag. Is this possible? Can I do this with XML?
推荐答案
因此，很长一段时间后，我实际上找到了一种使用AJAX进行此操作的方法. HTML导入是一个很棒的解决方案，但是截至04/2017为止，严重缺乏跨浏览器的支持，因此我想出了一个更好的解决方案.这是我的源代码:
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();
};
现在，当我想将HTML导入另一个文档中时，我要做的就是添加一个脚本标签，如下所示:
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-template.html的内容替换用于调用导入的脚本标记，它将执行模板中找到的所有脚本.模板不需要特殊格式，只需编写要在代码中显示的HTML.
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.
这篇关于是否可以在多个页面上像模板一样重用HTML?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
