Не могу найти, где у меня есть цикл popstate, создающий несколько записей истории

Я пытаюсь создать одну веб-страницу, которая заменяет содержимое основного 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");
    }
});

javascript html jquery history popstate
person kcdev    schedule 10.03.2014    source источник
comment
Ваш файл JS включен на каждую страницу (content/signIn.php и т. д.) или только на главную страницу с #mainContent?   -  person kevingessner    schedule 10.03.2014
comment
js — это внешний файл, связанный только с основным файлом index.php, где находится div #mainContent.   -  person kcdev    schedule 10.03.2014
comment
Поместите точку останова перед обработчиком кликов и внутри него. Если он действительно вызывается несколько раз, вы сможете увидеть стек, когда он подключен и когда он вызывается. Это должно дать вам понять, почему это происходит.   -  person kevingessner    schedule 10.03.2014
comment
это точка останова инструмента разработчика? Новичок в этом, вернемся к большему количеству руководств! Я доработаю и посмотрю, как пойдет. Первоначально я тестировал alert() после слушателя popstate, и он срабатывал несколько раз... каждый раз, когда я нажимал новую ссылку, все больше и больше.   -  person kcdev    schedule 10.03.2014
comment
Кажется, это как-то связано с pushState. Я прокомментировал прослушиватель popstate и все еще получал несколько создаваемых состояний. Это произошло как в Chrome, так и в IE. Однако, когда я тестировал на локальном хосте, я не получил несколько записей в истории.   -  person kcdev    schedule 12.03.2014

Ответы (1)


arrow_upward
2
arrow_downward

РЕШЕНО! Это было моим условием «если» для проверки API истории. Когда я удалил это, это устранило повторные толчки истории. У меня также есть файл htaccess, перенаправляющий все введенные URL-адреса на индексную страницу, что позволяет сравнивать пути к содержимому. Работает отлично, но я знаю, что мне придется заняться закладкой IF позже, когда сайт разрастется. На данный момент он работает так, как мне нужно, поэтому я могу двигаться вперед!

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");
        }
    };
};
person kcdev    schedule 11.03.2014