使用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

使用HTML將頁眉和頁腳包含為單獨的文件

問題描述

2 個解決方案

解決方案1
2 已采納 2018-08-10 00:27:31

解決方案2
0 2018-08-10 00:49:00

使用HTML將頁眉和頁腳包含為單獨的文件

問題描述

2 個解決方案

解決方案1 2 已采納 2018-08-10 00:27:31

解決方案2 0 2018-08-10 00:49:00

解決方案1
2 已采納 2018-08-10 00:27:31

解決方案2
0 2018-08-10 00:49:00