Question

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

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

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

编辑：至于一些建议.load方法可以使用，但是让我说我需要加载标签及其内容，如css文件，一些javascript等在整个页面上使用，似乎不正确加载到div ，有没有办法实现它？使用$（document）.load（“header”）是否可能成为解决方案？

Answer 1

你可以这样做：

$(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

Answer 2

您可以将文档看起来像这样：

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

包括使用javascript或jQuery的html文件？

2 个答案: