ボタンを1回だけリロードするクリック

Question

私はロードボタンを持っており、そのボタンでonclickイベントを呼び出すと、window.location.reload()を使ってページがリフレッシュされます。しかし、私が望むのは、リロードはボタンが初めてクリックされたときだけ呼び出されるべきであるということです。 2回目のクリックから、HTMLページがアクティブになるまで、リロードは呼び出されません。

これはどのようにjavascriptで実現できますか？例が参考になります。

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

最初のリロード時にパラメータを送信し、そのパラメータを使用してボタンの動作を変更できます。あなたはそれを行うためにlocal storageまたはsession storageを使用することができ

<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

：よう

何か。これは、Web Storage APIを使用する現代的なアプローチです。

この場合、ボタンのクリックを保持するプロパティをストレージに設定し、まだクリックされていない場合にのみ更新を行います。

次のスニペットのようにそれを行うことが可能です：あなたはそれについての詳細をお知りになりたい場合は、ウェブストレージ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(); 
    } 
}); 

より詳細な例は、here見つけることができます。