使用HTML将页眉和页脚包含为单独的文件
使用HTML将页眉和页脚包含为单独的文件
提问于 2018-08-10 08:18:53
我正在替换数百个链接/索引非常差的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>我正在使用This Stackoverflow Article中的方法，并拥有以下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>它不起作用。未显示任何内容。我在函数中只尝试了头部，在函数中也尝试了脚注，但也没有什么帮助。
我不确定我在这里错过了什么。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-10 08:27:31
确保您正在尝试通过FTP在本地wamp/mamp/lamp或在线(例如托管的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>Stack Overflow用户
发布于 2018-08-10 08:49:01
您应该创建一个服务，比如tomcat，并使用服务来访问index.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51777336
复制相关文章
相似问题