버튼을 한 번만 페이지를 다시로드하십시오.

Question

로드 버튼이 있으며 그 버튼에 onclick 이벤트를 호출하여 window.location.reload()을 사용하여 페이지를 새로 고칩니다. 하지만, 내가 원하는 것은 버튼을 처음 클릭 할 때만 다시로드해야한다는 것입니다. 두 번째 클릭부터 HTML 페이지가 활성화 될 때까지는 다시로드하지 않아야합니다.

어떻게 이것을 자바 스크립트로 구현할 수 있습니까? 모든 예가 도움이됩니다.

Answer 1

click 이벤트 내에서 button 태그에 disabled 속성을 추가해야합니다.

Reloading the page only once on a button click

당신은 jQuery를, 이런 식으로 뭔가를 사용하는 경우. 이 처리하는

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

Answer 2

한 가지 방법은 onclick을 수행하는 동작을 변경하는 것입니다. 여기를 한번보세요 : Change onclick action with a Javascript function

Answer 3

첫 번째 다시로드 할 때 매개 변수를 보내고 해당 매개 변수를 사용하여 단추의 동작을 변경할 수 있습니다. 같은

뭔가 :

<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> 

Answer 4

당신은 local storage 또는 session storage이 그렇게 사용할 수 있습니다. 이것은 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(); 
    } 
}); 

웹 스토리지 API에 대한 자세한 예를

이 here을 찾을 수 있습니다.