JavaScriptの閉じるボタン

JavaScript の閉じるボタンのアプリケーションと実装

Web デザインでは、ユーザーがいつでもウィンドウを閉じることができるように、ポップアップ ウィンドウまたはモーダル ボックスに閉じるボタンを追加する必要がある場合があります。この記事ではJavaScriptを使用して閉じるボタン機能を実装する方法を紹介します。

1. HTML コードを使用して閉じるボタンを作成します。

HTML コードでは、bb9345e55eb71822850ff156dfde57c8 タグを使用して閉じるボタンを作成できます。コードは次のとおりです。次のとおりです。

<button onclick="closeWindow()">关闭窗口</button>

このうち、onclick 属性は、ボタンがクリックされたときに関数をトリガーします。ウィンドウを閉じる機能を実現するには、JavaScript で closeWindow() 関数を定義する必要があります。

2. Window オブジェクトを使用してウィンドウを閉じる

JavaScript では、Window オブジェクトを使用して、現在のウィンドウまたは開いている子ウィンドウを閉じることができます。以下に 2 つの実装メソッドを示します。

1. window.close() メソッドを使用して、現在のウィンドウを閉じます。

<pre class="brush:javascript;toolbar:false;">function closeWindow() { window.close(); }</pre>

注: window .close() メソッドは、JavaScript によって開かれたウィンドウのみを閉じることができます。現在のウィンドウがユーザーによって開かれている場合、このメソッドは機能しません。

2. window.opener プロパティを使用して、親ウィンドウまたは開いている子ウィンドウを閉じます。

function closeWindow() {
    window.opener=null;
    window.open('','_self');
    window.close();
}

この例では、まず window.opener null に設定すると、閉じたウィンドウが自動的にその親ウィンドウを再度開かないようになります。次に、window.open() メソッドを使用して空のウィンドウを開きます。このメソッドの最初のパラメータは、開く必要がないため、空の文字列が渡されます。で 。 2 番目のパラメータはウィンドウ名です。ここでは _self が使用されています。これは、現在のウィンドウで新しい Web ページを開くことを意味します。最後に、window.close() メソッドを使用して、現在のウィンドウを閉じます。

3. jQuery で閉じるボタンを実装する

jQuery を使用して JavaScript コードを作成する場合、次の 2 つの方法を使用して閉じるボタン機能を実装できます。

##window.close()

メソッドを使用して、現在のウィンドウを閉じます (上記と同じ):
1. <pre class="brush:javascript;toolbar:false;">function closeWindow() { window.close(); }</pre>
jQuery でウィンドウを閉じるイベントをシミュレートします:

function closeWindow() {
    var windowEvent = jQuery.Event('beforeunload');
    $(window).trigger(windowEvent);

    if (!windowEvent.isDefaultPrevented()) {
        window.close();
    }
}

2. この例では、最初にシミュレートされたウィンドウを閉じるイベントを定義します。次に、jQuery の
trigger()

メソッドを使用してイベントをトリガーします。これにより、イベントに登録されているすべてのハンドラーが実行されます。ハンドラーにイベントをブロックするデフォルトの動作がない場合、

window.close() メソッドが実行されて現在のウィンドウが閉じられます。 概要:

この記事では、JavaScript と jQuery で閉じるボタンを実装する方法を紹介します。

window.close()

メソッドを使用してウィンドウを閉じるか、ウィンドウを閉じるイベントをシミュレートするかにかかわらず、コード内で閉じる動作を明確に定義し、それをユーザーに通知することを忘れないでください。

以上がJavaScriptの閉じるボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。