Question

我一直在寻找将html文件包含到另一个html文件中的方法...例如我有3个html文件... 1）header.html 2）content.html 3）footer.html ...和我想在header.html中包含header.html和footer.html，这样我就可以创建多个网站，包括页眉和页脚，如果我必须更改页眉和页脚的内容，以便影响所有网站。我已经阅读了html文件中的导入，其中包含了我的文件

<link rel="import" href="header.html">

我试过了它并没有用。浏览器是否支持导入？如果是的话你会怎么做呢？

我正在寻找类似于php include的方式，但是对于html。

感谢。

Answer 1

正确的做法是通过服务器端页面包含或通过JavaScript。

PHP示例：

<html>
<body>

<h1>Welcome to my home page!</h1>
<p>Some text.</p>
<p>Some more text.</p>
<?php include 'footer.php';?>

</body>
</html>

Javascript示例：

<script type="text/javascript">
function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
           if (xmlhttp.status == 200) {
               document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
           }
           else if (xmlhttp.status == 400) {
              alert('There was an error 400');
           }
           else {
               alert('something else other than 200 was returned');
           }
        }
    };

    xmlhttp.open("GET", "header.html", true);
    xmlhttp.send();
}
</script>

使用JQuery Library的Javascript：

$.ajax({
    url: "header.html",
    success: function(data){
      $("myDiv").html(data.responseText);
    }
});

如果你不想在js中弄脏你可以使用w3schools提供的脚本执行以下操作：

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>

<body>

<div w3-include-html="header.html"></div> 

<script>
w3IncludeHTML();
</script>

</body>
</html>

Answer 2

那是不可能的。您不能将HTML页面包含在另一个页面中，或者您需要使用PHP include（）/ require（）函数。

否则，您可以使用AJAX动态加载任何页面并将输出附加到主页，就像这样（这里我使用jQuery）：

<body>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: 'page.html',
            success: function(content) {
                document.body.innerHTML += content;
            }
        });
    </script>
</body>

（请注意，您应该添加'错误'事件等等。这只是一个简单的例子）

Answer 3

我的答案是另一种更简单的方法。我使用了JQuery和html5文件以及一个独立脚本。

这是文件的结构：

我的index.html包含用于将模板加载到标题和页脚的容器。

模板的Html5例如是：

结果：

HTML5导入无效

3 个答案: