jquery mobile如何正確加載共享頁眉和麪板HTML到不同目錄中的頁面

Question

我正在使用jQuery Mobile構建一個多頁面應用程序，並使用loadPage（）獲取不同的頁面。

高層結構如下。

• landing.html上

• /app-pages/page1.html

• /app-pages/page2.html

• /app-pages/page3.html

• /shared/header.html

• /shared/panel.html

• /圖像/

• /CSS/
• /js/core.js

在core.js，我JS到menuPanel.html和header.html中裝載到指定多個頁面。我的代碼如下。

$(document).on('pagebeforeshow', '[data-role="page"]', function(){ 
$.mobile.activePage.find('#menuPanel').load("shared/menuPanel.html", function(){ 
    $(this).parent().trigger('pagecreate'); 
});  
$.mobile.activePage.find('#masthead').load("shared/header.html", function(){ 
    $(this).parent().trigger('pagecreate'); 
});  
}); 

此加載HTMLS做工精細的landing.html上，但一旦導航到在應用程序的頁面目錄不同的網頁，我看到控制檯404錯誤，並在錯誤的文件路徑爲「 app-pages/shared/menuPanel.html「和」app-pages/shared/header.html「這些文件是使用相對路徑找到的。

我該如何改進可以全局使用的加載腳本，以便頁面可以駐留在不同的目錄中並仍然可以工作？

我該如何改進panelMenu.html中的鏈接路徑？目前，它使用相對路徑進行編碼，並指向僅適用於landing.html的app-pages目錄。

Answer 1

我相信你可以在每個鏈接前放一個/（前面的斜槓）使其相對於根文件夾。