页面重新加载时单击按钮

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