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」，因此當單擊退出時它只是加載觸發器。

如何阻止彈出窗口不斷重新加載？

謝謝！

來源

2016-02-29 rcsnooks

您應該檢查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重現該問題。

來源

2016-02-29 14:33:22 Leventix

我不能讓它去...看到我上面的編輯。 – Leventix

HTML5 pushstate和替換狀態重新加載狀態

回答

相關問題