HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのLocation reload()メソッドとは？構文・パラメータ・実装例をわかりやすく解説

HTML DOMのLocation reload()メソッドは、現在表示されているドキュメント（ページ）を再読み込みするためのメソッドです。ブラウザの「更新」ボタンをクリックしたときと同じ動作を、JavaScriptから実行できます。

基本の構文

reload()メソッドの書き方は以下のとおりです。

location.reload(forceGetParameter)

パラメータについて

引数として指定できる「forceGetParameter」には、次の2種類があります。

forceGetParameter説明
trueサーバーから最新のドキュメントを取得して再読み込みします（キャッシュを使用しない強制リロード）。
falseブラウザのキャッシュに保存されたドキュメントを使って再読み込みします。引数を省略した場合もこの挙動になります。

実装例

ここでは、Location reload()メソッドを使った具体的なサンプルコードを見ていきましょう。フォームに入力された内容が、ページ再読み込み時に失われる様子を確認できます。

<!DOCTYPE html>
<html>
<head>
<title>Location reload()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
    text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Location-reload( )</legend>
<label for="urlSelect">Email: </label>
<input type="email" id="emailSelect"><br>
<label for="urlSelect">Password: </label>
<input type="password" id="passSelect"><br>
<input type="button" onclick="doReload()" value="Reload">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var emailSelect = document.getElementById("emailSelect");
    var passSelect = document.getElementById("passSelect");
    divDisplay.textContent = 'Do not reload, all the details will be lost';
    function doReload(){
        alert('Page reloaded, all the details are lost');
        location.reload();
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

「Reload」ボタンをクリックする前の状態です。フォームにメールアドレスとパスワードが入力されています。

HTML DOMのLocation reload()メソッドとは？構文・パラメータ・実装例をわかりやすく解説

各項目に入力した後、「Reload」ボタンをクリックすると、アラートが表示され、ページが再読み込みされます。その結果、入力していた内容はすべて失われます。

HTML DOMのLocation reload()メソッドとは？構文・パラメータ・実装例をわかりやすく解説

まとめ

Location reload()メソッドを使えば、JavaScriptから簡単にページを再読み込みできます。引数にtrueを渡せばサーバーからの強制再読み込み、falseまたは省略時はキャッシュを利用した再読み込みになります。なお、再読み込みを行うとフォームの入力内容などは失われるため、実装の際はユーザーへの注意喚起も考慮するとよいでしょう。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド