使用带有history.pushstate和popstate的后退按钮时如何触发更改？

对于 js 来说，我几乎是一个新手，所以如果我错过了一些非常简单的东西，我很抱歉。

基本上，我已经对使用 History.pustate 和 popstate 进行了一些研究，并且已经将查询字符串添加到了 url 的末尾（?v=images) or (?v=profile)...(v意思是“查看”）通过使用：

var url = "?v=profile"
var stateObj = { path: url };
history.pushState(stateObj, "page 2", url);

我想要这样做，这样我就可以将内容加载到 div 中，但无需重新加载我使用以下命令完成的页面.load()功能。

然后我使用了这段代码：

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;

in $(document).ready()部分，后来在刚刚尝试<script>标签，但都不起作用。

我不知道如何制作它，因此当我使用后退按钮时内容会发生变化，或者至少制作它以便我可以触发我自己的函数来执行此操作；我假设它与状态对象有关？！我似乎无法在网上找到任何可以清楚解释该过程的内容。

如果有人能帮助我，那就太棒了，提前感谢任何帮助我的人！

The popstate仅当存在状态时才包含状态。

当事情是这样的时候：

1. 初始页面已加载
2. 加载新页面，并通过添加状态pushState
3. 后退按钮被按下

那么就没有状态，因为初始页面是定期加载的，而不是pushState。结果，onpopstate事件被触发state of null。所以当它是null，这意味着应该加载原始页面。

你可以这样实现它history.pushState将被一致地调用，你只需要提供一个状态改变函数，如下所示：单击此处获取 jsFiddle 链接 http://jsfiddle.net/SNsnN/132/

function change(state) {
    if(state === null) { // initial page
        $("div").text("Original");
    } else { // page added with pushState
        $("div").text(state.url);
    }
}

$(window).on("popstate", function(e) {
    change(e.originalEvent.state);
});

$("a").click(function(e) {
    e.preventDefault();
    history.pushState({ url: "/page2" }, "/page2", "page 2");
});

(function(original) { // overwrite history.pushState so that it also calls
                      // the change function when called
    history.pushState = function(state) {
        change(state);
        return original.apply(this, arguments);
    };
})(history.pushState);