javascript - 使用 HTML 将页眉和页脚作为单独的文件包含在内
问题描述
我正在替换链接/索引非常差的数百个 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>
页脚.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>
它不起作用。什么都没有显示。我只尝试了函数中的页眉和函数中的页脚,但这也无济于事。
我不确定我在这里缺少什么。
解决方案
确保您尝试在本地 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>
推荐阅读
- reactjs - 如何在反应中从firestore映射一组地图
- c++ - C++ 中的常量成员是什么?
- html - 中间表列不居中?
- python - 错误 (893) 无法通过索引、python 和 jupyter notebook 打开相机
- node.js - Node.js 如何知道我安装了某个包?
- python - 归一化和绘制按第 4 列分组的 3 列数据
- firebase - firebase 删除文档会在控制台中删除其子集合?
- c++ - 我的部分代码作为我的 if 语句的一部分被跳过
- python - 在 DataFrame 集合上使用多处理
- python - Encoder.encode 与转储(cle=Encoder)