Question

我正在试图弄清楚如何在我的ajax应用程序中使用此pushstate和popstate。我知道有一些插件，但我正在努力学习如何在它的原始形式中使用它。我也知道在IE中不支持原始格式。除此之外，我需要一些帮助来了解如何使用它。

它的pushstate部分非常简单。现在我有：

function loadForm(var1,var2){ 
    string = "xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

这会改变我的网址并将其添加到我的网址堆栈中。我有另一个看起来如下的函数：

function loadForm2(var1,var2, var3){ 
    string = "xyz="+var1+"&abc="+var2+"&123="+var3;
        history.pushState("", "page 2", string);
}

第二个函数在调用时也会更改url。现在我有那个部分我想弄清楚如何使用popstate。现在我有如下

window.popState = ajax;

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: string,
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

因此，如果您可以使用两个链接对我的页面进行成像，则一个调用loadForm函数，另一个调用loadForm2函数。当我点击每个链接时，表单通过ajax加载就好了，并且url会按原样更改。当我点击后退按钮时，网址将回滚到上一页的网址，但页面内容会再次加载当前表单而不是之前的表单。当我点击后退按钮时，它正在进行ajax调用（firebug），好像它正在尝试加载前一个表单，但不是运行先前的ajax调用，而是运行当前的ajax调用。所以我的url会回到之前的url，但是加载的表单或调用的ajax调用与最近的页面加载（不是上一页加载）相同。

我不确定我做错了什么，任何帮助都会非常感激。

Answer 1

你做的事情很奇怪。

window.popState = ajax;

我甚至感到惊讶ajax()甚至被召唤。

正常的做法是注册一个事件处理程序。

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

请参阅How to trigger change when using the back button with history.pushstate and popstate?

编辑：

基本上，您需要知道更改状态时要加载的表单。 .originalEvent.state将包含此信息，然后您可以将这些信息传递给您的ajax调用。它还应包含相应的string。

您的方法中的问题是string始终是最后一个新加载的页面之一。您需要在event.orginalEvent.state中读取该字符串。使用console.log()在该对象中找到它。

编辑2：

有没有办法可以举例说明我的代码应该是什么样的。我想你明白我想要完成的事情。

每次单击浏览器的后退按钮（或前进按钮）时，都需要从AJAX加载页面。

您试图通过说：

来做到这一点

window.popState = ajax;

当您更换系统功能时，这很危险。

相反，您应该在状态更改时注册事件处理程序。

jQuery(window).bind('popstate', ajax);

现在每次按下后退按钮，都会调用ajax()函数（应该）。

到目前为止，这只会改善您的方法，但不能解决您的问题。

问题是原始的ajax()函数引用了一个名为string的全局变量。此全局变量没有先前状态的记忆。因此，每次原始表单一次又一次地加载。

但是您已经通过执行以下操作正确地将string存储在状态中：

history.pushState("", "page 1", string);

因此，当调用ajax时，浏览器会给它一个事件对象，其中包含所有这些信息。

因此，您现在需要做的就是更改ajax()，如下所示：

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: document.location.search.substr(1),
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

最后，您还应该使用string关键字停止使用var作为全局变量，并确保字符串包含“？”：

function loadForm(var1,var2){ 
    var string = "?xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

这将减少将来几乎无法正常工作的混淆，但不能正常工作。

HTML 5 - Ajax popstate和pushstate

1 个答案: