ブラウザのリロードボタンを無効にし、htmlページのブラウザ履歴に情報を含めないでください

次のコードは、ユーザーがボタンをクリックして乱数を受け取るHTMLページを作成します。ユーザーがもう一度ボタンをクリックした場合、ユーザーにのみボタンをワンクリックで乱数を受信するようにコードが書かれているブラウザのリロードボタンを無効にし、htmlページのブラウザ履歴に情報を含めないでください

<!DOCTYPE HTML> 

<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>random page</title> 
<style type = "text/css"> 
fieldset { 
    width: 600px; 
    margin-right: auto; 
    margin-left: auto; 
} 
label { 
    float: left; 
    width: 250px; 
    text-align: right; 
    margin-right: 1em; 
    clear: left; 
} 
span { 
    float: left; 
} 
button { 
    display: block; 
    clear: both; 
    margin: auto; 
} 
</style> 
<script type = "text/javascript"> 
var doRoll = true; 

function roll(){ 
    if(doRoll) 
    { 
    //create variables for form elements 

    var spnCode = document.getElementById("spnCode"); 
    //get random number 

    //get the ceiling 
    var code = 1325 + Math.floor(Math.random() * 36); 
    spnCode.innerHTML = code; 
    doRoll = false; 
} 
} // end roll 
</script> 
</head> 
<body> 
<h1>random number</h1> 
<form> 
    <fieldset> 

    <label>code</label> 
    <span id = "spnCode">0</span> 
    <button type = "button" 
    onclick = "roll()"> 
    create the code 
    </button> 
    </fieldset> 
</form> 
</body> 
</html>

は、つまり、彼は新しい乱数を受信しません。しかし、もしブラウザのページで[Reload]ボタンをクリックし、[Generate number]ボタンをクリックすると、新しい乱数が受信されます。

サイトのブラウザページで[再読み込み]ボタンをオフにするにはどうすればよいですか？つまり、ユーザーがブラウザページの[リロード]ボタンをクリックすると、サイトはリロードされず、ユーザーは別の新しい乱数を受け取ることができません。自分のサイトのブラウザでリロードボタンを無効にします。ブラウザページで乱数を受信してリロードボタンをクリックすると、ユーザーはサイトを読み込まず、別の乱数を追加することができなくなります。

、別の問題：

ユーザーが乱数を受信し、サイトを閉鎖して、ブラウザの履歴を通じて、ブラウザを開き、新しい乱数を取得するために、再要求した後、URLが存在しない後歴史、これはどうすればできますか？

出典

2017-09-17 Sajjad

あなたのhtmlからフォームを削除する必要があり、あなたは、あなたのHTMLコード

<h1>random number</h1> 
    <label>code</label> 
    <span id="spnCode">0</span> 
    <button id="generate_btn" class="button" onclick="roll()"> 
    create the code 
    </button>

のlocalStorage

を使用する必要があります何をしたいあなたのjavascriptのコード

$(function() { 
    if (localStorage.getItem("clicked") === 'true') { 
    $('#generate_btn').prop("disabled", true); 
    } 
}); 


function roll() { 
    //create variables for form elements 
    var spnCode = document.getElementById("spnCode"); 
    //get the ceiling 
    var code = 1325 + Math.floor(Math.random() * 36); 
    spnCode.innerHTML = code; 
    localStorage.setItem("clicked", true); 
    console.log(localStorage.getItem("clicked")); 
    $('#generate_btn').prop("disabled", true); 

}

とCSSコードを達成するために最初にすることは、

fieldset { 
    width: 600px; 
    margin-right: auto; 
    margin-left: auto; 
} 

label { 
    float: left; 
    width: 250px; 
    text-align: right; 
    margin-right: 1em; 
    clear: left; 
} 

span { 
    float: left; 
} 

button { 
    display: block; 
    clear: both; 
    margin: auto; 
}

またjqueryを含める必要があります。これはjqueryを使用しているため、javascriptでも行うことができます。はJsfedded to see working code

参照し、ブラウザを閉じたときに、このコードはのlocalStorageを削除するためのものです

$(window).unload(function(){ 
    localStorage.removeItem("clicked"); 
});

出典

2017-09-17 11:07:30

ブラウザのリロードボタンを無効にし、htmlページのブラウザ履歴に情報を含めないでください

答えて

関連する問題