素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: twitter: @javascripter にどうぞ。

document.readyState

Firefoxでdocument.readyStateがサポートされていた。確認したバージョンはMozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2a1pre) Gecko/20090124 Minefield/3.2a1pre。
document.readyStateで、document.readyStateがどのような値になるか一覧できるようにした
Safariもdocument.readyStateがサポートされているけど、Firefoxとは返す文字列が違う。Firefoxの場合は

  1. uninitialized
  2. loading
  3. (DOMContentLoadedイベントが発生)
  4. interactive
  5. (loadイベントが発生)
  6. complete

で、Safariの場合は

  1. loading
  2. (DOMContentLoadedイベントが発生)
  3. loaded
  4. (loadイベントが発生)
  5. complete

となっている。
ドキュメント(Document)によるとIEでもサポートされているようで、IEはFirefoxと同じinteractiveがサポートされている。
uninitializedという値は

alert(
  document.body.appendChild(
    document.createElement('iframe')
  ).contentDocument.readyState
);

とすると発生する。ただしSafariはcompleteと表示する。
Firefox2等でdocument.readyStateを使用するには、

if (!('readyState' in document)) {
  document.readyState = 'loading';
  document.addEventListener(
    'DOMContentLoaded',
    function listener() {
      document.readyState = 'interactive';
      this.removeEventListener('DOMContentLoaded', listener, false);
    },
    false
  );
  document.addEventListener(
    'load',
    function listener() {
      document.readyState = 'complete';
      this.removeEventListener('load', listener, false);
    },
    false
  );
}

とすればいい。
document.readyStateを使用すると

// CSSをトグルする
javascript:
(function ready(fun) {
  if (document.readyState === 'complete') fun();
  else window.addEventListener('load', fun, false);
})(function () {
  // DOMを使用するコード
  Array.prototype.forEach.call(
    document.querySelectorAll('link[rel~="stylesheet"], style'),
    function (elem) { elem.disabled =! elem.disabled; }
  );
});

のようにdocumentが完全にloadされるまで待ってからスクリプトを動作させるといった事が可能になる。