使用ajax刷新页面后,如何后退

1、使用pushState(data, title, url)将url加入到堆栈中,data为要给state的数据,title页面标题可为空,url是要加入的

2、replaceState(data, title, url)和上一个参数相同,不同点在于他是改变当前的url,且不会让state.length加一

2、当后退时,调用onpopstate()函数,返回前一个url

3、具体实现

(1)在ajax中,

var num = Math.random().toString().replace('.', '%');
        $('#project').change(function() {
            $.post("{{ url('project') }}/"+$('#project').val(),
                {'_token': '{{ csrf_token() }}'}, function(data) {
                    $('#body').html(data);
                    window.history.pushState(data, '', "{{ Url('index') }}"+"?page="+num);  // 将url加入堆栈
                });
        });


(2)当后退时,自动会调用onpopstate()函数,当history.back(),go()都会调用

window.addEventListener('popstate', function(event) {   // 点后退时
            var state = event.state;    // 得到上个url的页面数据
            location.href = "{{ url('index') }}"+"?page="+state;
            $('#body').html(state);   // 再次改变内容
        });



猜你喜欢

转载自blog.csdn.net/snow_small/article/details/79164341