HTML重复块

时间:2016-04-11 16:22:09

标签: html html5

我希望做以下事情:

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

请帮忙!

4 个答案:

答案 0 :(得分:1)

您可以使用 HTML Imports ,这是 Web Components的一部分:

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

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

答案 1 :(得分:0)

您所谈论的内容似乎是一个名为模板的过程。有很多方法可以做到这一点,包括编写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>

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

答案 2 :(得分:0)

有很多选择,取决于你:

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/

答案 3 :(得分:-1)

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