From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/document/readystate/index.html | 133 ++++++++++++++++++++++++ 1 file changed, 133 insertions(+) create mode 100644 files/ja/web/api/document/readystate/index.html (limited to 'files/ja/web/api/document/readystate') diff --git a/files/ja/web/api/document/readystate/index.html b/files/ja/web/api/document/readystate/index.html new file mode 100644 index 0000000000..17d296e7df --- /dev/null +++ b/files/ja/web/api/document/readystate/index.html @@ -0,0 +1,133 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - DOM + - Document + - HTML DOM + - Reference + - readyState + - プロパティ +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}
+ +

Document.readyState プロパティは、その{{domxref("document", "文書")}}の読み込み状態を示します。

+ +

このプロパティの値が変化するとき、{{event("readystatechange")}} イベントが {{domxref("document")}} オブジェクト上で発生します。

+ +

構文

+ +
var string = document.readyState;
+
+ +

値

+ +

文書の readyState は次のうちの一つになります。

+ +
+
loading
+
この文書はまだ読み込み中です。
+
interactive
+
この文書は読み込みが終わり、解析が済みましたが、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中です。
+
complete
+
この文書とすべての副リソースの読み込みが終わっています。この状態は {{event("load")}} イベントがもうすぐ発火することを示します。
+
+ +

例

+ +

Different states of readiness

+ +
switch (document.readyState) {
+  case "loading":
+    // この文書はまだ読み込み中。
+    break;
+  case "interactive":
+    // この文書は読み込みが終了した。DOM 要素にアクセスできるようになった。
+    // しかし、画像、スタイルシート、フレームなどの副リソースはまだ読み込み中。
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // ページが完全に読み込み完了。
+    console.log("最初の CSS 規則: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange を DOMContentLoaded イベントの代替とする

+ +
// DOMContentLoaded イベントの代替
+document.onreadystatechange = function () {
+  if (document.readyState === 'interactive') {
+    initApplication();
+  }
+}
+
+ +

readystatechange を load イベントの代替とする

+ +
// load イベントの代替
+document.onreadystatechange = function () {
+  if (document.readyState === 'complete') {
+    initApplication();
+  }
+}
+ +

readystatechange を DOM の挿入や変更のイベントリスナーとして DOMContentLoaded の前に使用

+ +
document.addEventListener('readystatechange', event => {
+  if (event.target.readyState === 'interactive') {
+    initLoader();
+  }
+  else if (event.target.readyState === 'complete') {
+    initApp();
+  }
+});
+
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}}
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}}
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}初回定義
+ +

ブラウザーの対応

+ + + +
{{Compat("api.Document.readyState")}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf