Firefox 3のオンライン／オフライン状態を把握する

杉山貴章（オングス）
2008/11/28 17:00

ウェブアプリケーションをオフラインでも利用できるようにするためには、ウェブブラウザがいつオンライン／オフラインになったのかを正確に把握することが不可欠だ。ここではHTML 5で追加されるオンライン状態を知るための機能を紹介する。

オンライン状態を知るためのプロパティとイベント

　HTML 5ではウェブブラウザのオンライン／オフラインの状態をnavigatoe.onLineプロパティの値で保持する。オンラインならば"true"、オフラインならば"false"となる。ユーザエージェントがページを要求した際にネットワークに接続できなかった場合、この値はfalseに設定される。

　この値を手動で変更することもできる。図1のようにメニューから[ファイル]→[オフライン作業]と選択すればよい。現在がオンライン状態の場合は"false"に切り替わってオフライン状態になり、オフライン状態の場合は"true"に切り替わってオンライン状態になる。

図1 メニューからFirefoxのオンライン／オフライを切換え 図1 メニューからFirefoxのオンライン／オフライを切換え

　ブラウザの状態がオンラインに変更されたとき、document.bodyで"online"イベントが発生する。逆にオフラインに変更されたときは"offline"イベントが発生する。したがって、document.body、document、windowのいずれかに、addEventListenerを使ってでこれらのイベントを受け取るリスナを設定しておけば、ブラウザのオンライン状態の変化を検知することが可能となる。例えば、リスト1のようにする。

リスト1 ウェブブラウザのオンライン状態変更時の処理を定義

// オンラインに変わったとき
document.body.addEventListener("online", function () {
        リスナの処理
    }, false);

// オフラインに変わったとき
document.body.addEventListener("offline", function () {
        リスナの処理
    }, false);

　または、リスト2のようにbodyタグにononline/onoffline属性を指定することでもこのイベントを処理することが可能だ。

リスト2 bodyタグの属性でオンライン状態変更時の処理を設定

<body ... ononline="オンライン時の処理" onoffline="オフライン時の処理">

　次回は、実際にオンライン状態の変化を検知する簡単な例を紹介する。

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 昨日のトップ記事
  • 2日前
  • 3日前
  • 8日前
  • 9日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
Mac OS X RIA Chrome Adobe Google Ajax Microsoft 開発環境 Flash Windows 7 PHP JavaScript ツール リファレンス Java Safari Windows OS ソフトウェア開発 モバイル セキュリティ Off Topic iPod touch Windows Vista 脆弱性 Opera Internet Explorer プログラミング言語 iPhone CSS Mozilla HTML SOA Firefox 3 Firefox Webサービス Webデザイン 仮想化 アプリケーション WebKit データベース ブラウザ iPhone 3G オープンソース UI Database Linux Tips Apple 小技
  • 話題のタグを見る »