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

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

HTMLのononlineイベント属性は、ブラウザがオフライン状態からオンライン状態に復帰したとき（ネットワーク接続が確立されたとき）に発火するイベント属性です。この属性を使うことで、ユーザーが再びインターネットに接続した瞬間に、特定のスクリプトを実行できます。

ononlineイベント属性の構文

ononlineイベント属性の基本的な構文は以下のとおりです。

<tagname ononline="script"></tagname>

通常、この属性は<body>要素に指定して使用します。ネットワーク状態の変化はページ全体に影響するためです。

ononlineイベント属性の使用例

次の例では、<body>要素にononline属性とonoffline属性を両方設定し、ネットワークの接続・切断の状態変化を検知してアラートを表示します。

サンプルコード

<!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のononlineイベント属性とは？使い方とサンプルコードを解説

ここで、ネットワーク接続を無効化（オフライン）したり、再度有効化（オンライン）したりしてみましょう。状態が変化するたびに、それぞれ対応する関数が呼び出され、アラートが表示されます。

  • オンラインになったとき：ononline属性に設定したonlineFn()が実行され、「Hey! You are online」というアラートが表示されます。
  • オフラインになったとき：onoffline属性に設定したofflineFn()が実行され、「Hey! You are offline」というアラートが表示されます。

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

補足：navigator.onLineプロパティとの併用

より実践的な実装では、JavaScriptのnavigator.onLineプロパティを組み合わせると便利です。このプロパティを使うと、ページ読み込み時点でブラウザがオンラインかオフラインかを判定できます。

if (navigator.onLine) {
    console.log("現在オンラインです");
} else {
    console.log("現在オフラインです");
}

また、モダンな開発ではaddEventListener()メソッドを使ってwindow.addEventListener('online', 関数名)のようにイベントリスナーを登録する方法も一般的です。用途に応じて使い分けるとよいでしょう。

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

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

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

    HTMLのononlineイベント属性は、ブラウザがオフライン状態からオンライン状態に復帰したとき（ネットワーク接続が確立されたとき）に発火するイベント属性です。この属性を使うことで、ユーザーが再びインターネットに接続した瞬間に、特定のスクリプトを実行できます。ononlineイベント属性の構文ononlineイベント属性の基本的な構文は以下のとおりです。<tagname ononline="script"></tagname>通常、この属性は<body>要素に指定して使用します。ネットワーク状態の変化はページ全体に影響するためです。on