使用HTML将页眉和页脚包含为单独的文件

Question

我要替换几百个链接/索引编制不良的PDF和MS Word参考文档。 理想情况下，我想创建一个自包含的HTML版本。 理想情况下，将其托管，但有些人可能会将其复制到闪存驱动器中以供参考。

我已经确认我可以使用MAMP，但是有一种方法可以实现，而只是想使用本地文件而无需用户安装某些东西？

我有一个简单的页眉和页脚文件。

header.html

<div style="text-align: right; width: 90%; border-bottom: solid black 3px;">
    <img src="img/logo_75x75.png">
</div>

footer.html

<div style="text-align: center; height: 50px; position: relative; border: 1px solid black;">
    <img src="img/image.jpg"><span style="margin-left: 150px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);">SOMETEXT<span>
</div>

我正在使用本Stackoverflow文章中的方法，并具有以下test.html文件。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <script> 
            $(function(){
                $("#headerDiv").load("header.html");
                $("#footerDiv").load("footer.html");
            });  
        </script>
    </head>

    <body>
        <div id="headerDiv"></div>
        <div id="footerDiv"></div>
    </body>
</html>

没用 什么都没有显示。 我只在函数中尝试过标头，而在函数中仅尝试了页脚，但这都没有帮助。

我不确定我在这里缺少什么。

Answer 1

确保您尝试在本地Wamp / Mamp / Lamp或在线（例如通过FTP托管的Web服务器）上运行此程序，以供初学者使用。

它在我的本地服务器上运行良好，因为它确实具有该设置。

例如，当我把它扔到我的桌面或某个随机文件夹中时，它肯定是空白的。

但是，话虽如此，您确实声明它可能并不总是在Web服务器上运行，并且用户可能会存储在闪存驱动器中并像这样进行加载。 您可以使用对象方式来实现。 它不是大多数生产用途的最佳选择，但确实可以满足您的要求。

删除您的jQuery函数并修改您的主体以将该对象包含在div中。 这是结果代码：

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <div id="headerDiv"><object type="text/html" data="header.html" style="overflow:auto; width: 100%; height: 100%;"></object></div>
        <div id="footerDiv"><object type="text/html" data="footer.html" style="overflow:auto; width: 100%; height: 100%"></object></div>
    </body>
</html>

Answer 2

您应该创建一个服务（例如tomcat），并使用该服务访问index.html