如何为我的所有 jQuery Mobile 页面调用页眉和页脚？答案

【问题标题】：How can I call a header and footer for all of my jQuery Mobile pages?如何为我的所有 jQuery Mobile 页面调用页眉和页脚？
【发布时间】：2019-02-17 12:44:39
【问题描述】：

目前我正在为我的所有 jQuery Mobile 页面硬编码页眉和页脚。为了清理代码，我希望能够在为我拥有的每个页面调用之前声明页眉和页脚是什么。我在这里看到了类似的问题，但其中一些已经过时并且似乎不起作用。谁能给我一个可以帮助我的明确方法？谢谢！

<!-- Page 1 -->
<div data-role="page" id="page1">

<!-- Body -->
        <div id="schoolpositions">
            CONTENT IS LOADED IN FIRST SO THAT THE FIXED HEADER AND FOOTER LOAD OVER IT
        </div>

<!-- Header -->
        <div data-role="header" class="header" data-position="fixed">
            <a href="#page4" class="ui-btn-left" data-icon="user">Profile</a>EduSub Teacher
        </div>

<!-- Footer -->
        <div data-role="footer" id="footer" data-id="footer" data-position="fixed"">
            <div data-role="navbar" class="footernavbar">
                <ul>
                    <li><a class="ui-nodisc-icon" id="activeicon" href="#page1" data-icon="schooliconactive">Search</a></li>
                    <li><a class="ui-nodisc-icon" href="#page2" data-icon="plannericon">Planner</a></li>
                    <li><a class="ui-nodisc-icon" href="#page3" data-icon="briefcaseicon">Jobs</a></li>
                </ul>
            </div>
        </div>

有没有一种方法可以从一个来源加载它，而不是为页眉和页脚提供那段代码？另外，为了这个项目的目的，我宁愿使用 PHP 以外的东西。

【问题讨论】：

外部工具栏。 stackoverflow.com/a/22559428/1771795

标签： jquery html jquery-mobile

【解决方案1】：

您可以利用服务器端包含将单个页眉和页脚文件调用到您的 HTML 文档中。这是一个可以帮助您的资源。

https://www.w3.org/Jigsaw/Doc/User/SSI.html

此解决方案是一种替代方法，可以在不使用 PHP 的情况下为您提供类似的结果。

【讨论】：

【解决方案2】：

在谷歌快速搜索后，我发现了这个：

https://www.html5rocks.com/en/tutorials/webcomponents/imports/

通过声明：在您的页面上包含导入：

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

【讨论】：