JavaScriptの閉じるショートカットキー

王林
リリース: 2023-05-16 10:42:37
オリジナル
753 人が閲覧しました

コンピュータを日常的に使用する中で、Web ページやソフトウェアを閉じる必要があることがよくあります。 Windows システムを使用しているユーザーの場合、ショートカット キー Alt F4 を使用して現在のウィンドウを直接閉じることができます。でも、知っていますか?場合によっては、JavaScript でプログラミングする場合など、このアプローチには欠点がある可能性があります。

JavaScript は、Web 開発で一般的に使用されるスクリプト言語であり、さまざまなインタラクティブで動的な効果を作成するために使用できます。ただし、JavaScript でウィンドウを閉じる場合にはいくつかの問題があります。

まず、標準のショートカット キー Alt F4 を使用してウィンドウを閉じると、ブラウザまたはオペレーティング システムの閉じるイベントがトリガーされます。つまり、ブラウザによっては、ユーザーに「変更を保存しますか?」というメッセージが表示される場合があります。 「すべてのタブを閉じますか?」」、これらのポップアップはユーザー エクスペリエンスに悪影響を及ぼします。

第二に、場合によっては、ウィンドウを閉じるという操作は、ユーザーが望んでいる結果ではないことがあります。たとえば、JavaScript を使用して開発された一部の Web アプリケーションでは、ユーザーがウィンドウを閉じようとしたときに、ユーザーにページを保存するか離れるように求めるプロンプト、ポップアップ広告、確認ボックスなど、いくつかのインターフェイスまたはデータ操作を実行する必要がある場合があります。 、など。シャットダウン イベントが直接トリガーされた場合、これらの操作は完了できず、ユーザーに無用な迷惑がかかることになります。

それでは、JavaScript を使用して、ブラウザーやオペレーティング システムの close イベントをトリガーせずに現在のウィンドウを閉じるにはどうすればよいでしょうか?

ここでは 2 つのメソッドを紹介します。

  1. window.close() メソッドを使用します。

window.close() メソッドは、JavaScript で次の目的で使用されます。現在のウィンドウまたはタブを閉じるメソッド。 Alt F4 とは異なり、ブラウザまたはオペレーティング システムの閉じるイベントをトリガーせず、現在のウィンドウを直接閉じます。

サンプル コード:

<button onclick="window.close()">关闭窗口</button>
ログイン後にコピー
  1. カスタム終了イベント

もう 1 つの方法は、ユーザーがウィンドウを閉じようとしたときにカスタム終了イベントを使用することです。最初にカスタム アクションを実行してから、ウィンドウを閉じます。このようにして、ブラウザまたはオペレーティング システムの終了イベントのトリガーを回避しながら、ウィンドウを閉じる前にいくつかの必要な操作を完了できます。

サンプル コード:

window.onbeforeunload = function(){
  // 在这里执行需要完成的操作,比如提示用户保存或离开页面、弹出广告或确认框等
  // ...
  // 然后返回一个提示字符串,让浏览器弹出确认框,让用户确认是否离开当前页面
  return "请确认是否离开当前页面";
}
ログイン後にコピー

カスタムの閉じるイベントは、ユーザーがウィンドウを閉じようとしたときにのみトリガーされることに注意してください。ウィンドウが他の方法 (クリックなど) によって閉じられた場合、ジャンプするリンクを使用するか、他のショートカット キーを使用する場合)、イベントはトリガーされません。

これら 2 つの方法は、さまざまな開発シナリオで柔軟に使用でき、実際のニーズに応じて選択できます。

つまり、JavaScript でウィンドウを閉じる方法は Alt F4 ショートカット キーに限定されず、より多くの方法を学ぶことで、開発効率を向上させ、ユーザー エクスペリエンスを向上させることができます。

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

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