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

ブラウザがオフラインになったときにスクリプトを実行する方法｜HTMLのonoffline属性の使い方

Webブラウザがオフラインで動作を開始すると、onofflineイベントが発生します。このイベントを利用すれば、ネットワーク接続が切断された瞬間にJavaScriptの関数を呼び出し、ユーザーへの通知や特定の処理を実行することが可能です。

onoffline属性とは

onoffline属性は、<body>タグなどの要素に設定できるイベントハンドラで、ブラウザが「オンライン」から「オフライン」へ切り替わったタイミングで、指定したスクリプトが実行されます。

また、対になる属性として、オフラインからオンラインに復帰したときに発火するononline属性も用意されています。両者を組み合わせることで、ネットワーク状態の変化に応じた柔軟な処理が実現できます。

サンプルコード

以下のコードでは、オンライン・オフラインのそれぞれの状態変化に応じて、アラートで通知する処理を実装しています。

<!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 / onoffline属性は現在では非標準の扱いとなっており、最新の開発では window.addEventListener('offline', ...) や navigator.onLine プロパティを使う方法が推奨されています。ただし、基本的な仕組みは本記事のコードと同じですので、学習用として参考にしてください。

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

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

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

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