JavaScript の閉じるボタンのアプリケーションと実装
Web デザインでは、ユーザーがいつでもウィンドウを閉じることができるように、ポップアップ ウィンドウまたはモーダル ボックスに閉じるボタンを追加する必要がある場合があります。この記事ではJavaScriptを使用して閉じるボタン機能を実装する方法を紹介します。
1. HTML コードを使用して閉じるボタンを作成します。
HTML コードでは、<button>
タグを使用して閉じるボタンを作成できます。コードは次のとおりです。次のとおりです。
<button onclick="closeWindow()">关闭窗口</button>
このうち、onclick
属性は、ボタンがクリックされたときに関数をトリガーします。ウィンドウを閉じる機能を実現するには、JavaScript で closeWindow()
関数を定義する必要があります。
2. Window オブジェクトを使用してウィンドウを閉じる
JavaScript では、Window オブジェクトを使用して、現在のウィンドウまたは開いている子ウィンドウを閉じることができます。以下に 2 つの実装メソッドを示します。
window.close()
メソッドを使用して、現在のウィンドウを閉じます。 注: window .close()
メソッドは、JavaScript によって開かれたウィンドウのみを閉じることができます。現在のウィンドウがユーザーによって開かれている場合、このメソッドは機能しません。
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()<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbar:false;">function closeWindow() {
window.close();
}</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>
function closeWindow() { var windowEvent = jQuery.Event('beforeunload'); $(window).trigger(windowEvent); if (!windowEvent.isDefaultPrevented()) { window.close(); } }
window.close() メソッドが実行されて現在のウィンドウが閉じられます。
概要:
window.close()
メソッドを使用してウィンドウを閉じるか、ウィンドウを閉じるイベントをシミュレートするかにかかわらず、コード内で閉じる動作を明確に定義し、それをユーザーに通知することを忘れないでください。以上がJavaScriptの閉じるボタンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。