首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用HTML将页眉和页脚包含为单独的文件

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

Stack Overflow用户
提问于 2018-08-10 08:18:53
回答 2查看 1.7K关注 0票数 0

我正在替换数百个链接/索引非常差的PDF和MS Word参考文档。理想情况下,我想创建一个自包含的HTML版本。理想情况下,它应该是托管的,但也有可能一些人只是将其复制到闪存驱动器中以供参考。

我确认了我在MAMP上的工作,但是如果只想使用本地文件,有没有办法不需要用户安装就可以做到呢?

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

header.html

代码语言:javascript
运行
复制
<div style="text-align: right; width: 90%; border-bottom: solid black 3px;">
    <img src="img/logo_75x75.png">
</div>

footer.html

代码语言:javascript
运行
复制
<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文件。

代码语言:javascript
运行
复制
<!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>

它不起作用。未显示任何内容。我在函数中只尝试了头部,在函数中也尝试了脚注,但也没有什么帮助。

我不确定我在这里错过了什么。

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51777336

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档