HTML5 pushstate和替换状态重新加载状态

问题描述：

我正在最困难的时间搞清楚这一点。HTML5 pushstate和替换状态重新加载状态

基本上我有一个弹出窗口，点击的时候推动状态到地址栏：

$(document).on('click', '.youtube_video', function(){ 
    window.history.pushState("vidPage", "vidPopped", "/video/"+video_id +""); 
});

这工作得很好。现在，当我点击退出弹出，它返回一个链接（当前页面），像这样：

$(document).on('click', '.popblock_box_exit', function(){ 
    window.history.back(); 
});

这工作得很好。现在，当我使用浏览器按钮前进，它通过使该加载点击弹出：

window.onpopstate = function(e){ 
    if(e.state !== null) { 
     $("#"+ popID).trigger("click"); 
    } 
};

这工作得很好，但现在当我点击退出弹出它只是重新加载弹出。我知道e.state永远不会为空，因为我使用了“history.back”，因此当单击退出时它只是加载触发器。

如何阻止弹出窗口不断重新加载？

谢谢！

答

您应该检查onpopstate处理程序中的状态是"vidPage"。如果以前的历史记录条目包含非空的内容，则会显示弹出框。

尝试console.log('state:', e.state)因此您可以查看该历史记录中的状态。

编辑：

我认为当你点击前进按钮的问题可能是，它触发点击，它插入在历史上又一个项，所以会有 vidPage条目。如果您长按后退按钮，您可能会看到额外的条目。这里展示了一些有用的代码。

<html> 
    <head> 
    <title>Test</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <script> 
     $(function() { 
      $(document).on('click', '.youtube_video', function(){ 
       var video_id = "abc"; 
       window.history.pushState("vidPage", "vidPopped", "/video/" + video_id + ""); 
       showVid(); 
      }); 
      $(document).on('click', '.popblock_box_exit', function(){ 
       window.history.back(); 
       hideVid(); 
      }); 

      window.onpopstate = function(e){ 
       console.log("state", e.state); 
       if (e.state == 'vidPage') { 
        var popID = 'vid1'; 
        showVid(); // GOOD 
        // $("#"+ popID).trigger("click"); // BAD 
       } else { 
        hideVid(); 
       } 
      }; 
     }); 

     function showVid() { $('#popup').show(); } 
     function hideVid() { $('#popup').hide(); } 
    </script> 

    </head> 

    <body> 
    <div class="youtube_video" id="vid1">Youtube video</div> 

    <div id="popup" style="background: #CCC; display: none;"> 
     <div class="popblock_box_exit">Exit</div> 
    </div> 
    </body> 
</html>

更换GOOD与BAD重现该问题。

我不能让它去...看到我上面的编辑。 – Leventix

HTML5 pushstate和替换状态重新加载状态

相关推荐