只在单击按钮时重新加载页面一次

Reloading the page only once on a button click

本文关键字：一次 加载 按钮 新加载 单击      更新时间：2023-09-26

我有一个加载按钮，我正在调用该按钮上的onclick事件，这将使用window.location.reload()刷新页面。但是，我想要的是重载应该只在按钮第一次被点击时调用。从第二次单击开始，直到HTML页面激活为止，不应该调用重新加载。

您可以使用本地存储或会话存储来完成此操作。这是一种利用Web Storage API的现代方法。

在这种情况下，您可以在存储中设置一个属性来保持按钮单击，并且仅在尚未单击时进行刷新。

可以像下面代码段那样做:

$('button').on('click', function() {
    // will return null at the first call
    var buttonClicked = sessionStorage.getItem('isButtonClicked');
    // will only enter if the value is null (what is the case in the first call)
    if (!buttonClicked) {
        // set value to prevent further reloads
        sessionStorage.setItem('isButtonClicked', true);
        // reload the page
        window.location.reload();
    }
});

如果你想了解更多关于web存储API的细节，可以在这里找到一个更详细的例子

处理此问题的一种方法是更改onClick执行的操作。用Javascript函数

改变onclick动作

你可以尝试在第一次重载时发送一个参数，并使用该参数改变按钮的动作。

类似:

<script>
function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  } 
  return false;
}
var secondReload= getQueryVariable("secondReload");
if(!secondReload){
 //if button clicked
 window.location.reload();
}else{
//deactivate button
}
</script>

你需要在click事件中的button标签上添加一个disabled属性。

在一个按钮上只重新加载页面一次，点击

如果你使用的是jQuery，就像这样。

$('button').on('click',function()({
... your code here
$(this).attr('disabled');
});

相关文章：