動態地在每個頁面上包含頁眉和頁腳，而不需要服務器端代碼

我正在開發一個web應用程序，並且希望保持客戶端嚴格的HTML/JS/CSS而不需要服務器端生成HTML。動態地在每個頁面上包含頁眉和頁腳，而不需要服務器端代碼

servlet容器是Tomcat，它使用無狀態身份驗證向客戶端提供REST API。這將使未來的擴展更容易，而不必擔心粘滯的會話或管理某些外部存儲中的會話。

我現在的問題是我使用JQuery在頁面加載時動態插入header.html和footer.html。正如預期的那樣，頁眉和頁腳出現之前會有延遲。

除了靜態地將HTML放在網站的每個頁面之外，人們會推薦哪些選項作爲選項？

來源

2017-03-02 jimmy

是什麼原因d你不想使用服務器端包括？他們解決了您對FOUC的問題，並將您對服務器的三個請求減少到一個。 –

使頁面等待，直到jQuery加載，可以嘗試查看holdReady（）;看看這是否有幫助。 – Toxide82

@RoryMcCrossan - 我實際上正在考慮像PHP這樣基本的東西，但我希望最終服務於HTML的Web服務器儘可能輕鬆地應用服務器執行的所有咕嚕聲。有沒有什麼可以生成您的構建就緒HTML包含頁眉和頁腳，但只寫一次？ – jimmy

您可以創建單頁應用程序，因此頁眉和頁腳保持不變，只有正文更改內容。

事情是這樣的： https://jsfiddle.net/ArnoutPullen/0egv7rdL/1/

的index.html：

<header> 
    Header 
    <li class="customers" title="Customers">Customers</li> 
    <li class="companies" title="Companies">Companies</li> 
</header> 
<div class="body">Body</div> 
<footer> 
    Footer 
</footer>

main.js

$(document).ready(function(){ 
    $("li").click(function(){ 
    $(".body").html($(this).attr('title')); 
    //$(".body").load('customers.html'); 
    }); 
});

customers.html客戶

customers

來源

2017-03-02 10:45:17

啊我看到你要去哪裏，但我不確定它會在我的情況下工作。我需要人們能夠鏈接到'customer.html'，在你的情況下，它會提供一個沒有頁眉和頁腳的頁面，因爲它們只從index.html加載。 – jimmy

動態地在每個頁面上包含頁眉和頁腳，而不需要服務器端代碼

回答

相關問題