带有后退和前进按钮的history.pushState [英] history.pushState with back and forward buttons

问题描述

我需要使用这个ajax方法制作后退和前进按钮

这段代码工作正常，浏览器上的URL也应该更改为
但是当你点击后退时没有发生任何事情

I need to make back and forward buttons working with this ajax method
This code working good and the URL on browser changing as it should be
but when you click on back and forward buttons, nothing happening

(function(){

    function clickNav(e){
        e.preventDefault();
        var href = $(this).attr('href');
        history.pushState(null, null, href);

        $.ajax({
            url: href,
            dataType: 'html',
            cache: false
        }).done(function(html){
            var $html = $(html);

            $('title').html($html.filter('title').text());
            $('#content').replaceWith($html.find('#content'));
            $('#nav').replaceWith($html.find('#nav'));

            $('#nav li a').on('click',clickNav);
        });

    }
    $('#nav li a').on('click',clickNav);

})();

推荐答案

我今天必须处理这个问题。以下适用于我（目前在Win 7中的四个浏览器上测试过）...

I had to deal with this today. The following works for me (tested on four browsers in Win 7 so far)...

//CHECK FOR ADDRESS BAR CHANGE EVERY 500ms
var wwcint = window.setInterval(function(){
    if(window.last_location_href == undefined) {
        window.last_location_href = document.location.href;
    } else if(window.last_location_href != document.location.href) {
        window.last_location_href = document.location.href;

        //DO WHATEVER YOU NEED TO DO TO LOAD THE CORRECT CONTENT
        someFunctionToLoadTheContent(document.location.href);
    }
}, 500);

这篇关于带有后退和前进按钮的history.pushState的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！