Javascript 找不到创建多个历史记录项的popstate循环的位置

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

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>

解决了！这是我测试历史API的“if”条件。当我删除它时，它消除了重复的历史。我还有一个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");
        }
    };
};

---

您的JS文件是否包含在每个页面（content/signIn.php等）中，还是仅包含#mainContent的主页面？JS是一个外部文件，仅链接自#mainContent div所在的main index.php文件。在单击处理程序之前和中放置一个断点。如果它确实被多次调用，那么当它被连接和调用时，您将能够看到堆栈。这应该会给你一个发生这种情况的线索。这是一个开发工具断点？新的，回到更多的教程！我会解决的，看看进展如何。我最初在popstate侦听器之后测试了一个alert（），它被触发了多次…每次单击新链接时，触发的次数越来越多。它似乎与pushState有关。我注释掉了popstate侦听器，仍然在获取正在创建的多个状态。这发生在Chrome和IE中。然而，当我在本地主机上测试时，我没有得到多个历史记录条目。

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