所以,经过很长时间的尝试,我终于找到了一种使用 AJAX 的方法。HTML 导入是一个很好的解决方案,但截至 2017 年 4 月,浏览器支持严重不足,因此我想出了更好的解决方案。这是我的源代码:
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")
我的函数会用my-template.html
的内容替换调用导入的脚本标签,并执行在模板中找到的任何脚本。 模板不需要特殊格式,只需编写要在代码中显示的HTML即可。
$.get("header.htm", function(data) {$("#header").html(data);});
- seahorsepip