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の場合は
- uninitialized
- loading
- (DOMContentLoadedイベントが発生)
- interactive
- (loadイベントが発生)
- complete
で、Safariの場合は
- loading
- (DOMContentLoadedイベントが発生)
- loaded
- (loadイベントが発生)
- 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されるまで待ってからスクリプトを動作させるといった事が可能になる。