---
title: document.readyState
slug: Web/API/Document/readyState
tags:
  - API
  - DOMContentLoaded
  - Document.readyState
  - HTML DOM
  - load
  - onload
  - readyState
  - 参考
  - 属性
translation_of: Web/API/Document/readyState
---
<p>{{APIRef("DOM")}}{{ gecko_minversion_header("1.9.2") }}</p>

<p><strong><code>Document.readyState</code> </strong>属性描述了{{ domxref("document") }} 的加载状态。</p>

<p>当该属性值发生变化时，会在 {{domxref("document")}} 对象上触发 {{event("readystatechange")}} 事件。</p>

<h2 id="语法">语法</h2>

<pre>var <var>string</var> = <var>document</var>.readyState;</pre>

<h3 id="值">值</h3>

<p>一个文档的 <code><strong>readyState</strong></code> 可以是以下之一：</p>

<dl>
 <dt><code>loading</code>（正在加载）</dt>
 <dd>{{ domxref("document") }} 仍在加载。</dd>
 <dt><code>interactive</code>（可交互）</dt>
 <dd>文档已被解析，"<strong>正在加载</strong>"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。</dd>
 <dt><code>complete</code>（完成）</dt>
 <dd>文档和所有子资源已完成加载。表示 {{event("load")}} 状态的事件即将被触发。</dd>
</dl>

<h2 class="editable" id="示例">示例</h2>

<h3 id="不同的准备状态">不同的准备状态</h3>

<pre class="brush:js ">switch (document.readyState) {
  case "loading":
    // 表示文档还在加载中，即处于“正在加载”状态。
    break;
  case "interactive":
    // 文档已经结束了“正在加载”状态，DOM元素可以被访问。
    // 但是像图像，样式表和框架等资源依然还在加载。
    var span = document.createElement("span");
    span.textContent = "A &lt;span&gt; element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // 页面所有内容都已被完全加载.
    let CSS_rule = document.styleSheets[0].cssRules[0].cssText;
    console.log(`The first CSS rule is: ${CSS_rule }`);
    break;
}</pre>

<h3 id="模拟_DOMContentLoaded_事件的_readystatechange">模拟 DOMContentLoaded 事件的 readystatechange</h3>

<pre class="brush:js ">// 模拟 DOMContentLoaded/ jquery ready
document.onreadystatechange = function () {
  if (document.readyState === "interactive") {
    initApplication();
  }
}</pre>

<h3 id="模拟_load_事件的_readystatechange">模拟 load 事件的 readystatechange</h3>

<pre class="brush: js ">// 模拟 load 事件
document.onreadystatechange = function () {
  if (document.readyState === "complete") {
    initApplication();
  }
}</pre>

<h3 id="在_DOMContentLoaded_之前使用_readystatechange_作为事件处理程序以插入或修改DOM">在 DOMContentLoaded 之前使用 readystatechange 作为事件处理程序以插入或修改DOM</h3>

<pre>document.addEventListener('readystatechange', event =&gt; {
  if (event.target.readyState === 'interactive') {
    initLoader();
  }
  else if (event.target.readyState === 'complete') {
    initApp();
  }
});
</pre>

<h2 id="规范">规范</h2>

<table>
 <thead>
  <tr>
   <th scope="col"><strong>规范</strong></th>
   <th scope="col"><strong>状态</strong></th>
   <th scope="col"><strong>注释</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Initial specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.Document.readyState")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{event("readystatechange")}} event</li>
 <li>{{event("DOMContentLoaded")}} event</li>
 <li>{{event("load")}} event</li>
</ul>