JavaScriptの閉じるボタン-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptの閉じるボタン

PHPz

May 22, 2023 pm 02:10 PM

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

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

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

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

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

ログイン後にコピー

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

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

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

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

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function closeWindow() { window.close(); }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

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

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

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

ログイン後にコピー

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

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

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

##window.close()

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function closeWindow() { window.close(); }</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

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

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

ログイン後にコピー