0

我正在使用 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

在 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" 和 "app-pages/shared/header.html" 使用相对路径找到文件。

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

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

4

1 回答 1

0

我相信您可以在每个链接前放一个 /(正斜杠),使其相对于根文件夹。

于 2013-10-06T01:52:02.257 回答