1

我正在尝试创建一个网页，在单击导航链接时替换主 div 的内容。我已经能够实现 pushstate 函数来替换 div 内容并很容易地更改 url 地址。当使用 popstate 功能单击后退/前进按钮时，我还可以刷新内容。但是，现在我单击第一个链接，它工作正常，我单击下一个链接，它似乎应用了 2 个推送状态，第 3 次单击，应用了 3 个推送状态等。似乎某处发生了一个推送循环，但不确定它在哪里是。我正在寻找一些关于如何消除多个 pushstates 发生的建议，这样它们就不会在我的历史记录中重复。

HTML 代码：

<nav id="headerNav">
    <ul>
        <li><button class="navButton" id="signIn" href="./content/signIn.php" name="reply" title="SignIn">Sign In</button></li>
        <li><button class="navButton" id="signUp" href="./content/registration.php" name="registration" title="Registration">Sign Up</button></li>
        <li><button class="navButton" id="about" href="./content/about.php" name="settings" title="About">About</button></li>
    </ul>   
</nav>    

<section id="mainContent">
    <!-- CONTENT PAGES REPLACE HERE -->
    <?php
        include ('./content/start.php');
    ?> 
</section>

Javascript

$(document).ready(function() {

    if (window.history && history.pushState) {

        $(".navButton").click(function(e) {
                e.preventDefault();
            $("#mainContent").fadeOut().load($(this).attr("href")).fadeIn();
            history.pushState(null, $(this).attr("title"), $(this).attr("name"));
        });
    }
});


window.addEventListener('popstate', function() {
    //WHEN BACK/FORWARD CLICKED CHECKS URL PATHNAME TO DETERMINE WHICH CONTENT TO PLACE IN DIV
    if (location.pathname == "/index.php") {
        $("#mainContent").load("./content/start.php");
    } else {
        $("#mainContent").load("./content" + location.pathname + ".php");
    }
});
4

1 回答 1

3

解决了！测试历史 API 是我的“如果”条件。当我删除它时，它消除了重复的历史推送。我还有我的 htaccess 文件将所有输入的 url 重定向到允许路径名比较为内容触发的索引页面。效果很好，但我知道随着网站的发展，稍后我将不得不解决书签问题。现在，它按照我需要的方式运行，所以我可以继续前进！

window.onload = function() {
    // PUSHES CORRECT CONTENT DEPENDING ON URL PATH - ENSURES BACK/FORWARD AND BOOKMARKS WORK
    if (location.pathname == "/index2.php") {
        $("#mainContent").load("./content/start.php");
    } else {
        $("#mainContent").load("./content" + location.pathname + ".php");
    }

    // EVEN HANDLER TO DETECT CLICK OF NAVBUTTON CLASS
    $(".navButton").click(function(e) {
        $(this).addClass("active");
        $(".navButton").not(this).removeClass("active");
        var $mainContent = $("#mainContent");
        var $href = $(this).attr("href");
        var $title = $(this).attr("title");
        var $name = $(this).attr("name");

        // REPLACES CONTENT WITH DYNAMIC TRANSITION
        $mainContent.fadeOut(100, function() {
            $mainContent.load($href, function() {
                $mainContent.fadeIn(100);
            });
        });

        //CHANGES DOCUMENT TITLE SINCE PUSHSTATE CAN'T DO THIS YET
        document.title = $title;

        // PUSHES URL CHANGE AND HISTORY STATE TO BROWSER
        history.pushState('', $title, $name);

        //PREVENTS DEFAULT ACTION OF NAVBUTTON
        e.preventDefault();
    });

    // THIS EVENT MAKES SURE THAT THE BACK/FORWARD BUTTONS WORK AS WELL
    window.onpopstate = function(event) {
        if (location.pathname == "/index2.php") {
            $("#mainContent").load("./content/start.php");
        } else {
            $("#mainContent").load("./content" + location.pathname + ".php");
        }
    };
};
于 2014-03-11T22:25:41.260 回答