Question

我在网站上有几个页面，每个页面使用相同的标题。我想知道是否有一些方法可以简单地引用一个带有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做到这一点吗？

Answer 1

你可以在下面这样做。

<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;

Answer 2

所以，经过很长一段时间，我实际上找到了一种使用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。

Answer 3

据我所知，这是不可能的。您可以将标题加载为iframe元素中的网页。在过去，网页使用框架元素构建，以加载网页的单独部分，不建议这样做，并且当前浏览器支持归遗留原因。

在大多数情况下，这是通过php等服务器端语言完成的，例如include("header.php");。

是否可以在多个页面上重复使用HTML作为模板？

3 个答案: