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

HTML DOM Window stop()メソッドの使い方を徹底解説

HTML DOM の Window stop() メソッドは、ブラウザの「停止」ボタンをクリックしなくても、JavaScript からウィンドウのリソース読み込みを中断できる便利な機能です。ページの読み込み中に特定の条件を満たさない場合など、プログラム側で任意のタイミングで読み込みを止めたいときに活用できます。

構文

stop() メソッドの基本的な構文は以下のとおりです。

window.stop()

サンプルコード

ここでは、HTML DOM Window stop() メソッドの具体的な使用例を紹介します。このサンプルでは、入力された名前が「admin」であれば新しい子ウィンドウを開き、それ以外の場合は window.stop() を呼び出して現在のページの読み込みを停止します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Window stop()</title>
<style>
    * {
        padding: 2px;
        margin:5px;
    }
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Window-stop( )</legend>
            <input id="urlSelect" type="url" placeholder="Type URL here..."><br>
            <input id="textSelect" type="text" placeholder="Full Name"><br>
            <input type="button" value="Go To" onclick="openWindow()">
            <input type="button" value="Close" onclick="closeWindow()">
            <input type="button" value="Restore" onclick="restoreWindow()">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
    <script>
        var urlSelect = document.getElementById("urlSelect");
        var textSelect = document.getElementById("textSelect");
        var winSource;
        function openWindow() {
            if(textSelect.value === 'admin'){
                browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height200");
                winSource = urlSelect.value;
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Active";
            } else {
                window.stop();
                document.getElementById("divDisplay").textContent = "Child Window Stopped";
            }
        }
        function closeWindow(){
            if(browseWindow){
                browseWindow.close();
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Closed";
            }
        }
        function restoreWindow(){
            if(browseWindow.closed){
                browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
                browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Restored";
            }
        }
    </script>
</body>
</html>

実行結果

認証されていない名前（admin 以外）を入力した状態で 「Go To」ボタンをクリックすると、window.stop() が実行され、ページの読み込みが停止します。

HTML DOM Window stop()メソッドの使い方を徹底解説

一方、正しい名前（admin）を入力して 「Go To」ボタンをクリックすると、指定した URL の子ウィンドウが正常に開きます。

HTML DOM Window stop()メソッドの使い方を徹底解説

ポイントまとめ

  • window.stop() は、ブラウザの停止ボタンと同等の動作を JavaScript から実行できる。
  • 画像やスクリプトなどのリソース読み込みを即座に中断する。
  • 認証チェックや条件分岐と組み合わせることで、不要な読み込みを防ぐ制御に役立つ。
  1. HTML Window moveTo()メソッドの使い方と実装例をわかりやすく解説

    HTMLのWindow moveTo()メソッドは、ウィンドウの左端と上端を指定した座標へ移動させるためのメソッドです。ポップアップウィンドウなどを任意の画面位置に配置したい場合に活用できます。構文moveTo()メソッドの基本的な構文は以下の通りです。window.moveTo(x, y)引数の意味は次のようになっています。x: ウィンドウを水平方向に移動させる距離（ピクセル単位）y: ウィンドウを垂直方向に移動させる距離（ピクセル単位）実装例ここでは、新しいウィンドウを作成し、そのウィンドウをmoveTo()メソッドで移動させるサンプルコードを紹介します。<!DOCTYPE html

  2. HTML Window moveBy()メソッドの使い方をわかりやすく解説

    HTMLのWindow moveBy()メソッドは、開いているウィンドウを現在の位置から相対的に移動させるためのメソッドです。指定したピクセル数だけ、ウィンドウを水平・垂直方向にずらすことができます。構文moveBy()メソッドの基本的な構文は以下のとおりです。window.moveBy(x,y)引数の意味は次のとおりです。x：ウィンドウを水平方向（横）に移動させる距離（ピクセル単位）。正の値で右へ、負の値で左へ移動します。y：ウィンドウを垂直方向（縦）に移動させる距離（ピクセル単位）。正の値で下へ、負の値で上へ移動します。moveBy()とmoveTo()の違い似たメソッドにwindow.m