包括带有 javascript 或 jQuery 的 html 文件？ [复制]答案

【问题标题】：including html files with javascript or jQuery? [duplicate]包括带有 javascript 或 jQuery 的 html 文件？ [复制]
【发布时间】：2014-05-05 08:47:08
【问题描述】：

有没有办法使用 javascript 或 jQuery 将 .html 文件包含到另一个页面中，例如页眉和页脚文件，因为它们在整个项目中保持不变。我在使用 jQuery 时看到的问题是它可能会在其中一个此类文件中，因此在使用之前没有加载，所以我认为 javascript 会是一个更好的选择。

如果存在这样的方法，它是否也会缓存加载/包含的文件？

理想的解决方案不需要使用容器来加载数据，而是在指定包含代码的地方包含一个文件。

编辑：至于一些建议，可以使用 .load 方法，但可以说我需要加载标签及其内容，如 css 文件、一些 javascript 等在整个页面上使用，将其加载到 div 中似乎不正确，有没有办法实现呢？使用 $(document).load("header") 是一种可能的解决方案吗？

【问题讨论】：

@Andy 如果我想在
标签及其所有内容中包含整个标题怎么办？所以我不必在每个页面上都指定 css 文件，等等。我可以使用这种方法看到动态页面标题的问题，但为了举例，让我们忽略它
@Ilja 每页只能有一个head 元素，除非您想使用iframes... 只需将您需要的内容加载到实际页面的head。
我会看看 angular 或 doT.js 等模板引擎，可能会让你的工作更轻松一些。这是一个可以帮助你的网站find one

标签： javascript jquery html

【解决方案1】：

你可以有一个看起来像这样的文档：

<!doctype html>
<html>
<head>
<script>

    ajax = new XMLHttpRequest();

    ajax.onreadystatechange = function() {
        if( ajax.readyState == 4 && ajax.status == 200 ) {
            document.getElementsByTagName("head")[0].innerHTML += ajax.responseText;
        }
    }

    ajax.open("GET", "head.html", true);
    ajax.send();

    ajax2 = new XMLHttpRequest();

    ajax2.onreadystatechange = function() {
        if( ajax2.readyState == 4 && ajax2.status == 200 ) {
            document.getElementsByTagName("body")[0].innerHTML = ajax2.responseText;
        }
    }

    ajax2.open("GET", "body.html", true);
    ajax2.send();

</script>
</head>
<body></body>
</html>

【讨论】：

【解决方案2】：

你可以这样做：

$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});

HTML 将是：

<html>
<head>
<title></title> 
</head>
<body>
<div id="header"></div>
<div id="footer"></div>
</body>
</html>

SOURCE

【讨论】：

是的，这是 Andy 留下的评论中使用的方法，但是如果我想用整个标签及其内容加载它，所以我不必定义它们在每一页上？
是否可以通过 $(document).load("header.html") 实现类似的功能？但在这种情况下，它必须是一个 javascript 方法，因为我们还没有加载 jQUery。