logo标签列表

Javascript domready?

javascriptdom-events
52

我知道可以使用不同的框架，如prototype或jQuery来附加函数到window.onload，但这不是我想要的。

我需要像.readyState这样的东西，这样我就可以做出这样的事情：

if(document.isReady){
  var id = document.getElem ...
}

除了使用框架提供的方法，还有其他方法吗？

10
跨浏览器可靠地检测DOM是否已准备好并不是一件简单的事情。为什么您不想使用已经被证明可靠的框架之一呢？ - Mauricio Scheffer
2
我建议看一下DomAssistant - 它是一个非常轻量级的库。或者，可以查看D-Lite获取一组额外轻量级的函数。 - dusoft
基本上，我被要求不这样做。 - kristian nissen
1
请看我在一个类似问题上的回答，其中包含了一个跨浏览器的DOMReady对象链接。 - Victor
你可能需要重新考虑正确的答案。 - Patrick W. McMahon
同意@PatrickW.McMahon的观点，截至2017年，建议使用标准的document.addEventListener('DOMContentLoaded' ...，而不是使用库中的方法。 - Pierre H.
11个回答
0

看起来这个问题很久以前就被问过了。今天我们有document.readyState，甚至还有一个与之配套的事件。

为了达到相同的效果：

if(document.isReady){
  var id = document.getElem ...
}

请使用以下内容：
const doTask = () => {
  var id = document.getElem ....
}

if (document.readyState !== 'loading') {
  // in case we missed the `loading` state, start running the
  // task now...
  doTask();
} else {
  //  otherwise register a listener to be notified of the next state
  document.addEventListener('readystatechange', event => {
    if (event.target.readyState === 'interactive') {
      doTask();
    }
  });
}

其他使用window:DOMContentLoaded事件的答案，将在上述事件侦听器运行之后接收该事件，这意味着使用readystatechange事件允许您在DOMContentLoaded被触发之前开始处理DOM，同时仍然能够与DOM元素交互。
MDN文档提供了一个示例here。以防示例消失，在此处提供它： 

const log = document.querySelector('.event-log-contents');
const reload = document.querySelector('#reload');

reload.addEventListener('click', () => {
  log.textContent ='';
  window.setTimeout(() => {
      window.location.reload(true);
  }, 200);
});

window.addEventListener('load', (event) => {
    log.textContent = log.textContent + 'load\n';
});

document.addEventListener('readystatechange', (event) => {
    log.textContent = log.textContent + `readystate: ${document.readyState}\n`;
});

document.addEventListener('DOMContentLoaded', (event) => {
    log.textContent = log.textContent + `DOMContentLoaded\n`;
});
<div class="controls">
  <button id="reload" type="button">Reload</button>
</div>

<div class="event-log">
  <label>Event log:</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接