0

我有以下问题： 我正在尝试创建一个基于纯 AJAX 页面导航的 HTML5 页面。所以我在主页上有名为“index.html”的页面。这个包含我的 css、脚本和菜单。菜单如下所示：

<ul>
    <li><a id="startLink" class="navlink" href="pages/start.html">Start</a></li>
    <li><a class="navlink" href="pages/test.html">Test</a></li>
</ul>

通过单击其中一个锚点，我调用了一个 JavaScript，将“href”下的页面通过 AJAX 调用加载到“index.html”上的 div 中。所以我的主页永远不会重新加载，所有新内容都只是显示在一个容器中。该函数如下所示：

$(document).ready(function()
{
var popped = ("state" in window.history && window.history.state !== null), initialURL = location.href;

$(".navlink").click(function(e)
{
    var link    = $(this);
    var href    = link.attr("href");

    loadContent(href);
    window.history.pushState(null, null, href);

    e.preventDefault();
});

$(window).bind("popstate", function(e)
{
    // Ignore inital popstate that some browsers fire on page load
    var initialPop = !popped && location.href == initialURL;
    popped = true;
    if (initialPop) return;

    loadContent(location.pathname);
});

init();
});

function init()
{
    $("#startLink").click();
};

function loadContent(url)
{
    $("main").load(url);
};

我正在使用 history.pushState 和 popstate 函数来处理浏览器历史记录并在浏览器中显示 URL。这很好用，但现在我们要解决我的问题了。

当我加载 index.html 时，我的 init() 函数单击开始锚点以在页面上显示一些初始内容。好吧，现在，如果我想访问 test.html，浏览器会显示类似“Host/Somepath/pages/pages/test.html”的路径。与 start 相同：.../pages/pages/start.html。我猜原因是我在锚点上的href，因为浏览器认为他已经进入了我的文件夹页面并显示start.html。从那里他想导航到 pages/pages/ 以转到我菜单中的任何其他页面。我的项目结构看起来是这样的：

  • 索引.html
  • css
  • 图片
  • 脚本
  • 页面
    • 开始.html
    • 测试.html

有谁知道我该如何处理这个问题？我不想将所有 html 放在一个文件夹中，我需要子文件夹来构建项目。

4

1 回答 1

0

尝试使用 HTML5 localStorage或sessionStorage

示例代码

window.sessionStorage.setItem('isFirst', true);
$(document).ready(function () {

  if(window.sessionStorage.getItem('isFirst')){
    window.sessionStorage.setItem('isFirst', false);
    //Put your code here. It will work only once
    init();
  }    
});

您可以阅读有关 HTML 本地和会话存储的更多信息click

于 2013-11-13T12:11:13.920 回答