Question

此演示我想点击前进到content（index.php？id = id）点击返回subject（index.php）。

Q1。（index.php？id = id）直接链接content页面不可用，它会显示（index.php）subject，为什么？

Q2。第二次点击后退（向前＆gt;返回＆gt;向前＆gt;返回），然后网址会停止更改，为什么？（Safari 5）更新：使用window.onpopstate网址正常。没有得到这个错误。

任何建议将不胜感激。

$(window).bind('popstate', function(){
    $.ajax({
        url:location.pathname,
        success: function(data){
            $('.container').html(data);
        }
    });
});

演示

$('.subject').click(function(){
    $.ajax({
        url: 'index.php?id=' + $(this).attr('rel'),
            success: function(data){
                $('.container').html(data);
            }
    });
    var pageurl;
    pageurl = 'index.php?id=' + $(this).attr('rel');
    if(pageurl != window.location){
        window.history.pushState({path: pageurl}, "", pageurl);
    }
    return false;
});

的index.php

<div class="container">
    <?php
        if($_GET['id']){
           ...
            print"<div class="content"></div>";
        }
        else{
           ...
           print"<div class="subject" rel="id"></div>"
        }
    ?>
</div>

Answer 1

popstate事件处理程序将收到一个事件对象，其中包含您传入pushState的状态。它可以通过event.state访问。这是event interface definition。这里有一些演示代码来说明这个概念。

window.addEventListener("popstate", function(event) {
if( event.state !== null )    
    alert('Browser back button was clicked, state returned ' + JSON.stringify( event.state ) ); 
};

Answer 2

您只需使用ajax获取页面内容（即您的场景的主题）并在页面容器中显示它。考虑一下你是否在'index.php'并点击一个主题..所以你的网址改为'index.php？id = 7'。现在你点击返回..在'popstate'事件中，'location.pathname'给出'http：//host/index.php'。多数民众赞成，使用ajax从'location.pathname'获取数据并显示它。

$(window).bind('popstate', function(){
    $.ajax({
        url:location.pathname,
        success: function(data){
            $('.content').html(data);
        }
    });
});

带有ajax的HTML5历史popstate，直接链接不起作用

2 个答案: