在使用带有history.pushstate和popstate的后退按钮时如何触发更改？ [英] How to trigger change when using the back button with history.pushstate and popstate?

问题描述

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

基本上，我已经完成了一些关于使用history.pustate和popstate的研究，我做了这样一个查询字符串被添加到URL的末尾（？v = images ）或（？v = profile ）...（ v 意思是'view'）：

  var url =？v = profile
 var stateObj = {path：url}; 
 history.pushState（stateObj，page 2，url）; 
  

我想这样做我可以将内容加载到div但不重新加载我拥有的页面使用 .load（）函数完成。

然后我使用了这段代码：

  $（窗口）。 bind（'popstate'，function（event）{
 var state = event.originalEvent.state; 
  

$（document）.ready（）部分中的

，然后在< script> 标签内尝试没有工作。

我不知道如何制作它，所以当我使用后退按钮时内容发生了变化，或者至少使它成为我所以我可以触发我自己的功能这样做;我假设它与状态对象有关？！我似乎无法在网上找到任何可以清楚解释流程的东西。

如果有人能帮助我，这将是惊人的，并且预先感谢任何人！

解决方案 popstate 只包含一个状态。

当它像这样：

1. 初始页面已加载


2. 新页面已加载，状态添加编辑通过 pushState


3. 返回按钮被按下

然后没有状态，因为初始页面是定期加载的，而不是 pushState 。结果， onpopstate 事件被触发，其中状态 null 。因此，当它是 null 时，这意味着应该加载原始页面。

你可以实现它，使 history.pushState 将会被一致地调用，你只需要提供这样的状态改变函数：点击这里查看jsFiddle链接

 功能变更（状态）{
 if（state === null）{//初始页面
 $（div）。text（Original）; 
} else {//添加pushState 
 $（div）。text（state.url）; 
 
 
 $ b $（window）.on（popstate，function（e）{
 change（e.originalEvent.state）; 
}）;点击（功能（e）{
 e.preventDefault（）; 
 history.pushState（{url：/ page2}，
 $ b $（a / page2，page 2）; 
}）; 
 
（function（original）{//覆盖history.pushState，以便它也调用
 //调用
时的更改函数history.pushState = function（state）{
 change（state）; 
返回original.apply（this，arguments）; 
}; 
}）（history.pushState）; 
  

I'm pretty much a novice when it comes to js so I'm sorry if I'm missing something really simple.

Basically, I've done some research into using the history.pustate and popstate and I've made it so a query string is added to the end of the url (?v=images) or (?v=profile)...(v meaning 'view') by using this:

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

I want to make it so I can load content into a div but without reloading the page which I have done using the .load() function.

I then used this code:

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

in $(document).ready() section and later tried within just <script> tags and neither worked.

I don't know how to make it so the content changes when I use the back button or at least makes it so I can trigger my own function to do so; and I'm assuming it has something to do with the state object?! I just can't seem to find anything online that explains the process clearly.

If someone could help me out it would be amazing and thank you in advance to anyone who does!

解决方案

The popstate only contains a state when there is one.

When it goes like this:

1. initial page loaded
2. new page loaded, with state added via pushState
3. back button pressed

then there is no state, because the initial page was loaded regularly, not with pushState. As a result, the onpopstate event is fired with a state of null. So when it is null, it means the original page should be loaded.

You could implement it such that history.pushState will be called consistently and you only need to provide a state change function like this: Click here for jsFiddle link

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);

这篇关于在使用带有history.pushstate和popstate的后退按钮时如何触发更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！