我在网站上有几个页面,每个页面使用相同的标题.我想知道是否有一些方法可以简单地引用一个带有html的文件,类似于这个伪代码中的标题类:
<!-- Main Page -->
<body>
<html_import_element src = "myheadertemplate.html">
<body>
然后在一个单独的文件中:
<!-- 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做到这一点吗？
你可以在下面以这种方式做到这一点.
<head>
<link rel="import" href="myheadertemplate.html">
</head>
你可以在哪里使用myheadertemplate.html
<div>
<h1>This is my header</h1>
<div id = "navbar">
<div class = "Tab">Home</div>
<div class = "Tab">Contact</div>
</div>
</div>
然后你可以在下面的JS中使用它
var content = document.querySelector('link[rel="import"]').import;
所以,经过很长一段时间,我实际上找到了一种使用AJAX的方法.HTML Imports是一个很好的解决方案,但截至04年04,跨浏览器的支持非常缺乏,所以我想出了一个更好的解决方案.这是我的源代码:
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导入另一个文档时,我所要做的就是添加如下脚本标记:
<script>HTMLImporter.import("my-template.html");</script>
我的函数实际上会替换用于调用导入内容的脚本标记my-template.html,它将执行模板中找到的任何脚本.模板不需要特殊格式,只需编写要在代码中显示的HTML即可.
| 归档时间： |
|
| 查看次数： |
10598 次 |
| 最近记录： |