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

HTML DOMのLocation replace()メソッドとは？使い方をサンプルコード付きで解説

HTML DOMのLocation replace()メソッドは、現在表示中のドキュメントを新しいドキュメントに置き換えるためのメソッドです。このメソッドを実行すると、現在のドキュメントのURLがブラウザの履歴から削除されるため、「戻る」ボタンを使って元のページへ戻ることができなくなります。

構文

基本的な構文は以下のとおりです。

location.replace(URLString)

URLStringには、置き換え先のページURLを文字列で指定します。

使い方の例

それでは、Location replace()メソッドの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title>Location replace()</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-replace( )</legend>
<label for="urlSelect">Current URL: </label>
<input type="url" id="urlSelect" value="https://www.example.com"><br>
<label for="newUrlSelect">New URL: </label>
<input type="url" id="newUrlSelect" placeholder="Give new url..."><br>
<input type="button" onclick="doReplace()" value="Go to new URL">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var urlSelect = document.getElementById("urlSelect");
    var newUrlSelect = document.getElementById("newUrlSelect");
    function doReplace(){
        if(newUrlSelect.value === '')
            divDisplay.textContent = 'Provide new URL';
        else{
            location.replace(newUrlSelect.value);
            divDisplay.textContent = 'Redirecting to new URL';
        }
    }
</script>
</body>
</html>

実行結果

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

何も入力せずに「Go to new URL」ボタンをクリックした場合：

HTML DOMのLocation replace()メソッドとは？使い方をサンプルコード付きで解説

必要な情報を入力してから「Go to new URL」ボタンをクリックした場合：

HTML DOMのLocation replace()メソッドとは？使い方をサンプルコード付きで解説

replace()とassign()の違い

似たメソッドにlocation.assign()がありますが、assign()はページ遷移の履歴が残るため「戻る」ボタンで前のページに戻ることができます。一方、replace()は履歴に残さずに遷移するため、戻ることができません。ユーザーに前のページへ戻ってほしくないリダイレクト処理には、replace()が適しています。

  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() メソッド