Question

我希望做以下事情：

将外部html块插入新的html页面
从一个html文件中使用相同的html标题，用于多个页面，而无需为所有页面重新创建标题

请帮忙！

Answer 1

您可以使用 HTML Imports ，这是 Web Components的一部分：

<head>
  <link rel="import" href="/path/to/your/file.html">
</head>

如果您的页面不必是纯HTML，则应考虑使用PHP或类似的服务器端语言。

Answer 2

您所谈论的内容似乎是一个名为模板的过程。有很多方法可以做到这一点，包括编写Javascript以将预先编写的HTML模板插入DOM（网页）。您还可以考虑使用预先编写的模板库，例如http://handlebarsjs.com/或其他包含http://underscorejs.org/等模板函数的库。一个简单的MVC指南，如：

http://blog.ircmaxell.com/2014/11/a-beginners-guide-to-mvc-for-web.html

也可以帮助您入门。

在更实际的意义上，这是一个可能的解决方案：

首先，我建议您使用＆＃39;块＆＃39;您想要插入单独的文件夹中。例如，在我运行的网站中，我将它们放在\ templates文件夹（或子文件夹）中，但只要对你有意义，你就可以或多或少地调用它。出于我们的目的，我们说我们创建了block.html并将其放在我们的\ templates子文件夹中......

现在，在每个模板中，您将拥有您想要加载的任何内容;像这样的东西：

<h2>Title of section</h2>
<p>My text.</p>

或者不管你喜欢什么。然后，您可能希望在主页面中添加一个元素，该元素调用一些Javascript，在特定条件发生时加载HTML模板。例如，如果您想加载我们的block.html文件，您可能会写这样的内容：

<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></div>

这会调用一个名为＆＃39; menuClicked（）＆＃39;的Javascript函数。当我们点击带有id＆＃39; calling-block＆＃39;。

的div时

在函数中我们会写这样的东西：

<script>
    function menuClicked(insertEl, UrlString, onTemplateLoaded) {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        document.getElementById(insertEl).innerHTML = xhttp.responseText;
        if (onTemplateLoaded) onTemplateLoaded();
    };
  };
  console.log(UrlString);
  xhttp.open("GET", UrlString, true);
  xhttp.send();
};
</script>

这是一种非常简单的做事方式，我相信人们会告诉你它有问题，所以我肯定会建议你自己阅读，但我希望这涵盖了非常基础。

Answer 3

有很多选择，取决于你：

1）使用iframe（很多责任问题）http://www.w3schools.com/tags/tag_iframe.asp

2）在javascript中调用ajax，加载外部资源，然后将其打印在占位符标记中（例如使用jquery）http://www.w3schools.com/jquery/jquery_ajax_load.asp

3）使用一些服务器语言/预处理器（php，ruby，nodejs），如果你可以依赖（需要安装在服务器上）

4）还有静态页面生成器，你在你的html中添加标记，然后他们会将带有标记的html编译为完整的静态html http://hyde.github.io/。

Answer 4

你需要使用像php，aspx这样的服务器端功能......

HTML重复块

4 个答案: