HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

ブラウザがオンラインになったときにスクリプトを実行するには？【HTMLのononline属性】

ウェブブラウザがオフラインからオンライン状態に切り替わると、ononline 属性（イベント）がトリガーされます。このイベントを利用すれば、ネットワーク接続が復帰した瞬間にJavaScriptの処理を実行することが可能です。

逆に、接続が切断されたタイミングで何らかの処理を行いたい場合は onoffline 属性を使用します。両者を組み合わせることで、ネットワークの接続状態に応じた柔軟なWebアプリケーションを構築できます。

サンプルコード

<!DOCTYPE html>
<html>
  <body ononline = "onlineFunc()" onoffline = "offlineFunc()">
    <script>
       function onlineFunc() {
          alert ("Working online!");
       }
       function offlineFunc() {
          alert ("Working offline!");
       }
   </script>
    <p>ブラウザのメニューバーから「ファイル」メニューを開き、「オフライン作業」を選択して、オンラインとオフラインを切り替えてみてください。</p>
  </body>
</html>

コードの解説

  • ononline = "onlineFunc()"：ブラウザがオンラインに戻ると onlineFunc() が呼び出され、「Working online!」というアラートが表示されます。
  • onoffline = "offlineFunc()"：ブラウザがオフラインになると offlineFunc() が呼び出され、「Working offline!」というアラートが表示されます。

動作確認の方法

上記のコードをHTMLファイルとして保存し、ブラウザで開いてください。次に、メニューバーの「ファイル」メニューにある「オフライン作業（Work Offline）」を選択して、オンラインとオフラインを切り替えます。状態が変わるたびに、それぞれに対応したアラートが表示されることを確認できます。

なお、これらのイベントはブラウザによってサポート状況が異なります。実際に開発へ組み込む際は、対象とするブラウザでの動作確認を行うことをおすすめします。

  1. HTMLでブラウザがメディアデータを取得中のときにスクリプトを実行するには？

    HTMLでは、onprogress属性を使用することで、ブラウザがメディアデータ（動画や音声）をダウンロードしている最中にスクリプトを実行できます。onprogress属性とはonprogress属性は、ブラウザがメディアデータを取得（バッファリング）している間に発生するイベントです。読み込みの進捗状況をユーザーへ通知したり、ローディング表示を制御したりする際に活用できます。実装例以下のコードを実行して、onprogress属性の動作を確認してみましょう。<!DOCTYPE html> <html>    <body>   &n

  2. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実