頁面重新加載時單擊按鈕

Question

當我單擊一個按鈕（#test-element）時，它會使頁面刷新，但我希望它在刷新頁面后運行 function 以通過自動單擊按鈕（.cart-contents）打開購物車。 如果單擊添加到購物車按鈕 (#test-element)，我如何在頁面刷新后運行 function。 所以頁面刷新並點擊另一個按鈕（.cart-contents）？

<script>
 $("#test-element").on("click",function() {
 setTimeout(function () {
 location.reload(true);
 }, 500);
 });
</script> 
<script type="text/javascript">
  $("#test-element").on("click",function() {
  setTimeout(function () {  
  $(document).ready(function(){
  $(".cart-contents").trigger('click'); 
  }, 500);
  });});
</script>

Answer 1

你可以使用sessionStorage （只適用於當前session頁面）來保持你的點擊state。頁面重新加載后，我們可以刪除那個臨時存儲。

您可以嘗試使用此沙箱進行測試

$(document).ready(function() {
  $("#test-element").on("click", function() {
    setTimeout(function() {
      sessionStorage.setItem('isReloaded', 'true');
      location.reload(true);
    }, 500);
  });
  $(".cart-contents").on("click", function() {
    alert('cart-content triggered')
  })
  const isReloaded = sessionStorage.getItem('isReloaded');
  if (isReloaded) {
    sessionStorage.removeItem('isReloaded')
    $(".cart-contents").trigger('click');
  }
});

這種方式並不完美，但它可以解決您在保持頁面狀態方面的基本需求。

Answer 2

您可能不需要（甚至不想）實際執行此操作。 對於混合 AJAX 和頁面加載/請求的問題，這聽起來像是一個過於復雜的解決方案，真正的解決方案是修復任何導致您想要這樣做的設計問題以補償它。

話說回來...

每次加載頁面時，JavaScript 都會重新開始。 因此，您希望在頁面加載之間保留的任何信息都需要存在於頁面代碼本身之外。 一個這樣的持久數據的地方可能是localStorage 。

因此，您重新加載頁面的操作會將一個值寫入localStorage ：

$("#test-element").on("click",function() {
  setTimeout(function () {
    localStorage.setItem("clickCartContents", true);
    location.reload(true);
  }, 500);
});

加載頁面時，您可以檢查是否設置了該值：

$(document).ready(function(){
  if(localStorage.getItem("clickCartContents")) {
    $(".cart-contents").trigger('click');
    localStorage.removeItem("clickCartContents");
  }
});