Fatal编程技术网
  • html/
  • HTML重复块

HTML重复块

html

HTML重复块,html,Html,我希望做以下几件事： 将外部html块插入新的html页面 对多个页面使用同一个html文件中的相同html头，而不对所有页面重新创建头 请帮忙 您需要使用服务器端功能，如php、aspx…您可以使用的一部分： <head> <link rel="import" href="/path/to/your/file.html"> </head> 如果你的页面不必是纯HTML，你应该考虑使用PHP或类似的服务器端语言。 你所说的似乎是一个称为模板的过程

我希望做以下几件事：

  • 将外部html块插入新的html页面
  • 对多个页面使用同一个html文件中的相同html头，而不对所有页面重新创建头
请帮忙

您需要使用服务器端功能，如php、aspx…

您可以使用的一部分：

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

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

你所说的似乎是一个称为模板的过程。有很多方法可以做到这一点，包括编写Javascript将预先编写的HTML模板插入DOM（网页）。您也可以考虑使用预先编写的模板库，例如包含模板功能的另一个库。一个简单的MVC指南，如：

也许对你的开始也有帮助

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

首先，我建议将要插入的“块”放在单独的文件夹中。例如，在我运行的网站中，我将它们放在\templates文件夹（或子文件夹）中，但只要对您有意义，您或多或少可以随意调用它。出于我们的目的，假设我们已经创建了block.html并将其放在\templates子文件夹中

现在，在每个模板中，您将拥有想要加载的内容；大概是这样的：

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

章节标题
我的文本
或者随便你喜欢什么。然后，您可能希望向主页添加一个元素，该元素调用一些Javascript，当出现特定情况时，Javascript将加载HTML模板。例如，如果要加载到block.html文件中，可以编写如下内容：

<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></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>
当我们单击id为“calling block”的div时，它将调用一个名为“menuClicked（）”的Javascript函数

在函数中，我们将编写如下内容：

<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></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>


函数菜单单击（插入、URL字符串、ontemplated）{
var xhttp=newXMLHttpRequest（）；
xhttp.onreadystatechange=函数（）{
如果（xhttp.readyState==4&&xhttp.status==200）{
document.getElementById（insertEl.innerHTML=xhttp.responseText；
如果（ontemplated）ontemplated（）；
};
};
console.log（UrlString）；
open（“GET”，UrlString，true）；
xhttp.send（）；
};
这是一种非常简单的做事方式，我相信人们会告诉你它有问题，所以我肯定也会建议你自己阅读，但我希望这涵盖了最基本的内容。

有很多选择，取决于你：

1） 使用iFrame（责任方面有很多问题）

2） ajax调用javascript，加载外部资源，然后在占位符标记中打印它（例如jquery）

3） 使用一些服务器语言/预处理器（php、ruby、nodejs），取决于是否可以（需要安装在服务器上）

4） 还有静态页面生成器，您可以在html中添加标记，例如，他们会将带有标记的html编译为完整的静态html。

我只希望以html的方式。好心的建议我已经更新了我能给出的最简单的解释。我希望有帮助。如果你发现有什么不对劲的地方，或者你想进一步解释，或者以不同的方式解释，我会非常乐意帮助你。只要告诉我你在理解什么方面有困难，或者你需要涵盖哪些其他方面，我会尽我最大的努力解决。我不知道HTML导入。谢谢你提供的信息。因为你的回答，我已经把这个页面加入了书签。彼得，我可以从中学到很多东西！这只是我在一个网站上使用的一些代码。在我对它进行即时修改后，它需要重新检查和修复，以使它更基本，更适合所问的问题，这样我就不会把它当作福音书，但我希望它至少对某些人有用！