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');
});     
});

这样加载HTML在landing.html上运行正常，但是一旦导航到app-pages目录中的不同页面，我在控制台中看到404错误，错误中的文件路径是“app-pages / shared / menuPanel.html“and”app-pages / shared / header.html“使用相对路径找到文件。

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

如何改进panelMenu.html中的链接路径？目前，它使用相对路径进行编码，并指向仅适用于landing.html的app-pages目录。

Answer 1

我相信你可以在每个链接前放一个/（正斜杠）使其相对于根文件夹。

jquery mobile如何正确地将共享头和面板HTML加载到驻留不同目录的页面

1 个答案: