jquery Mobile 如何正确加载共享标头和面板 HTML 到驻留在不同目录的页面

我正在使用jQuery Mobile构建一个多页面应用程序，并使用loadPage((来获取不同的页面。

高级别结构如下。

• 着陆.html

• /app-pages/page1.html

• /app-pages/page2.html

• /app-pages/page3.html

• /shared/header.html

• /shared/panel.html

• /图像/

• /.css/
/
• js/core.js

在核心.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');
});     
}); 

这种加载 HTML 在登陆.html上工作正常，但是一旦导航到 app-pages 目录中的不同页面，我在控制台中看到 404 错误，错误中的文件路径是"app-pages/shared/menuPanel.html"和"app-pages/shared/header.html"这些文件是使用相对路径找到的。

如何改进可全局使用的加载脚本，以便页面可以驻留在不同的目录中并且仍然可以工作？

如何改进面板菜单中的链接路径.html？目前，它使用相对路径进行编码，并指向仅适用于登陆.html的应用程序页面目录。