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

HTMLのonofflineイベント属性とは？使い方とサンプルコードを解説

HTMLのonofflineイベント属性は、ブラウザがオフライン状態に切り替わったとき（ネットワーク接続が切断されたとき）に発生するイベントです。この属性を活用することで、ユーザーがインターネット接続を失った瞬間を検知し、警告メッセージの表示や画面内容の切り替えといった処理を実行できます。

onofflineイベント属性の基本構文

onofflineイベント属性の基本的な記述方法は以下の通りです。

<tagname onoffline="script"></tagname>

onoffline / ononlineイベント属性の使用例

ここでは、onofflineイベント属性と、対になるononlineイベント属性を組み合わせたサンプルコードを紹介します。ネットワークの接続・切断の状態に応じて、それぞれ異なるアラートメッセージが表示される仕組みです。

サンプルコード

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
    }
    .show {
        font-size: 1.2rem;
        color: #fff;
    }
</style>
<body ononline="onlineFn()" onoffline="offlineFn()">
<h1>HTML onoffline/ononline Event Attribute Demo</h1>
<p style="color:#db133a;">Try to disable/enable your network.</p>
<div class="show"></div>
<script>
    function onlineFn() {
        alert("Hey! You are online");
    }
    function offlineFn() {
        alert("Hey! You are offline");
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、まず次のような画面が表示されます。

HTMLのonofflineイベント属性とは？使い方とサンプルコードを解説

この状態で、実際にネットワーク接続をオフにしたり、オンに戻したりして動作を確認してみてください。

  • 接続が切断されたとき：「Hey! You are offline」というアラートが表示される（onofflineイベントが発火）
  • 接続が復帰したとき：「Hey! You are online」というアラートが表示される（ononlineイベントが発火）
HTMLのonofflineイベント属性とは？使い方とサンプルコードを解説

補足：対応ブラウザについて

onoffline / ononlineイベント属性は、ChromeやFirefoxなど主要なモダンブラウザで利用できます。ただし、ブラウザによってイベントの検知タイミングが異なる場合があるため、実務で利用する際には動作確認を行うことをおすすめします。また、JavaScriptからはnavigator.onLineプロパティでも現在の接続状態を取得できるため、用途に応じて使い分けるとよいでしょう。

  1. HTMLのondragenterイベント属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。構文（Syntax）ondragenterイベント属性の基本的な書き方は以下のとおりです。<tagname ondragenter="script"></tagname>対象となるタグの属性として「ondragenter」を指定し、値

  2. HTMLのonofflineイベント属性とは？使い方とサンプルコードを解説

    HTMLのonofflineイベント属性は、ブラウザがオフライン状態に切り替わったとき（ネットワーク接続が切断されたとき）に発生するイベントです。この属性を活用することで、ユーザーがインターネット接続を失った瞬間を検知し、警告メッセージの表示や画面内容の切り替えといった処理を実行できます。onofflineイベント属性の基本構文onofflineイベント属性の基本的な記述方法は以下の通りです。<tagname onoffline=script></tagname>onoffline / ononlineイベント属性の使用例ここでは、onofflineイベント属性と、対に