JavaScriptで現在のウィンドウイベントを閉じる方法

PHPz
リリース: 2023-04-21 09:42:28
オリジナル
3226 人が閲覧しました

JavaScript は、Web ページ上でフロントエンドのインタラクティブな効果を記述するために一般的に使用されるスクリプト言語であり、その強力な操作パフォーマンスは Web 開発でよく使用されます。多くの場合、ユーザー エクスペリエンスを向上させるために JavaScript を介していくつかの特別な関数を実装する必要がありますが、その中でも、現在のウィンドウ イベントを閉じることは頻繁に使用される関数です。

JavaScript では、現在のウィンドウ イベントを閉じる方法が 2 つあり、リンクとコードを通じてトリガーされます。以下では、これら 2 つの方法とその実装について詳しく紹介します。

方法 1: リンクを通じて現在のウィンドウを閉じるイベントをトリガーする

リンクを通じて現在のウィンドウ イベントを閉じるのは比較的簡単です。ハイパーリンクで JavaScript コードを使用するだけです。サンプル コードは次のとおりです:

<a href="javascript:window.close();">关闭当前窗口</a>
ログイン後にコピー

コードの説明: ハイパーリンク内の JavaScript コード「window.close();」を使用して、現在のウィンドウを閉じます。「javascript:」は、これが JavaScript コードであることを示します。

このメソッドは、window.open メソッドによって開かれたウィンドウのみを閉じることができることに注意してください。 window.location.href を使用して開かれたウィンドウは、この方法では閉じることができません。

方法 2: コードを通じて現在のウィンドウの終了イベントをトリガーする

コードを通じて現在のウィンドウの終了イベントをトリガーするには、ウィンドウ オブジェクトの close メソッドを使用する必要があります。このメソッドにより、現在のウィンドウを閉じる効果を JavaScript で実現できます。サンプル コードは次のとおりです。

window.close();
ログイン後にコピー

コードの説明: window オブジェクトの close メソッドを使用して、現在のウィンドウを閉じます。

このメソッドは、現在のスクリプトが配置されているウィンドウのみを閉じることができることに注意してください。 JavaScript を通じて開かれた新しいウィンドウの場合、ウィンドウ内でこのメソッドを使用してウィンドウを閉じる必要があります。

window.close メソッドを直接呼び出すだけでなく、イベント メカニズムを使用して現在のウィンドウを閉じることもできます。たとえば、ボタンがクリックされたときに、onclick イベントを使用してこのメ​​ソッドをトリガーできます。サンプル コードは次のとおりです。

<button onclick="window.close()">关闭当前窗口</button>
ログイン後にコピー

コードの説明: ボタンの onclick イベントで window.close メソッドを呼び出して、現在のウィンドウを閉じます。

window.close メソッドを使用すると、ブラウザはプロンプト ボックスをポップアップ表示して、現在のウィンドウを閉じるかどうかをユーザーに尋ねることに注意してください。これは誤操作を避けるために設定される必須のメカニズムですが、現時点ではこのプロンプト ボックスを無効にする確実な方法はありません。

概要

現在のウィンドウを閉じるイベントは JavaScript の一般的な操作であり、上記の 2 つの方法で簡単に実現できます。ブラウザのセキュリティ制限により、閉じることが失敗したり、プロンプト ボックスがポップアップ表示される場合があることに注意してください。したがって、実際の開発では、ニーズに応じて適切な終了方法を選択し、誤操作による悪影響を可​​能な限り回避する必要があります。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート