问题标签 [domcontentloaded]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 为什么 document.body 与我的 readyState 逻辑为空？
我正在尝试尽快添加一个iframe元素document.body。
所有 4 种主要浏览器（Chrome、Safari、FF、IE ——各种版本）都出现错误报告，我们看到document.body的是null. 我认为当我的 JS 文件被缓存并快速加载时会发生这种情况。
这是插入的逻辑iframe：
我很难在干净的环境中重现这个问题，这让我猜测这在野外是如何发生的。
本来我也试过这个rreadyState逻辑，但是我们看到document.body是undefined在IE的时候处于loading状态。
我目前的提问方式......
- 问题是
default这样吗？我应该在那里添加事件侦听器吗？我可以修改案例的顺序，以便事件侦听器是默认的？ body有可能null参加DOMContentLoaded活动吗？- 是否有可能还有其他价值
document.readyState正在下降？
html - 对 DOMContentLoaded 事件的误解
从MDN，我知道 DOMContentLoaded 不会等待样式表。
DOMContentLoaded 事件在初始 HTML 文档完全加载和解析后触发，无需等待样式表、图像和子框架完成加载。
但来自varvy.com和谷歌
一个常见的误解是样式与 domContentLoaded 无关，但根据 W3 HTML5 规范，这是不正确的
domContentLoaded：标记 DOM 准备好并且没有样式表阻塞 JavaScript 执行的点——这意味着我们现在可以（可能）构建渲染树。
domContentLoaded 通常在 DOM 和CSSOM都准备好时进行标记。
那么，哪一个是对的？什么是阻止脚本的样式表？
angular - 如何使用 Angular2 减少 DOMContentLoaded 时间
我正在将模板（类似于仪表板）从 JQuery 转换为 Angular 2。该网站有很多弹出窗口，这些弹出窗口有很多选项卡，所以我将每个弹出窗口放在不同的组件中，以分别维护其代码和逻辑。现在，如果我在 chrome 中观察 Network 选项卡，则可以看出主要延迟是 DOMContentLoaded 延迟。
所以我的问题是如何在这种情况下减少这种延迟。
此页面仅包含一个注册和忘记表单。
javascript - Chrome：DOMContentLoaded 不等待延迟脚本标签中的 CSSOM？
据我了解，当在位于样式表正下方的脚本标记中使用 defer 时，浏览器会在执行脚本并触发 DOMContentLoaded 之前等待样式表加载（CSSOM）。（有关此的更多信息）
这适用于 Firefox，但不适用于 Chrome，所以我做了一个测试用例，其中一个巨大的 css 文件在延迟的脚本标记之前加载。
带有样式表和延迟脚本的 HTML 文件。
CSS 文件包含引导程序以及设置字体系列的测试类。
JS 文件包含 jQuery 和一个简单的测试脚本。
在 Firefox 中，可以在执行时间解析 CSS，我看到“它有效！” > 见火狐
在 Chrome 中，无法在执行时间解析 CSS，我看到“Times New Roman” > 参见 Chrome
如果您检查开发人员工具，DOMContentLoaded 在 Chrome 和 Firefox 中的触发方式不同。Firefox 会在 CSS 文件加载结束时触发它（这就是测试用例工作的原因），但 Chrome 不会等待 CSS 文件加载。
为什么会这样，谁能解释我如何解决这个问题？
编辑：Chromium 确认此行为是一个错误，请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=792420
javascript - 跳过 JavaScript DOMContentLoaded 事件
我做了一个简单的测试页面：
并且，有时（可能在 30 个请求中出现一次）DOMContentLoaded事件会被跳过。
这可能是由于页面加载不正确造成的。但在日志中我看到：“脚本运行”。我想做一个重复的DOMContentLoaded事件函数，如果DOMContentLoaded事件被跳过，我的函数做了正确的工作。
我找到了这个解决方案：
1)
2)
3)
4)
但哪种解决方案更正确？这些之间有什么区别？
javascript - DOMContentLoaded 和 turbolinks:load 不会触发动态加载的第一页加载脚本（加载时没有 turbolinks）
'turbolinks:load' 不会在直接加载的页面上被触发，但在加载了 turbolinks 'turbolinks:load' 事件的页面上工作正常。
dynamic_load_turbolinks_script.js 的代码
上述代码的浏览器控制台输出是
我知道这个问题是因为动态脚本是在 DOM 解析之外执行的，但是有没有办法实现所需的行为？
javascript - 在 selenium java 中使用 DOMContentLoaded 和 window.onload
有没有办法可以在 java 的 selenium 脚本中使用 javascript 的 document.addEventListener("DOMContentLoaded", ready) 和 window.onload() ？
类似于：JavascriptExecutor js = (JavascriptExecutor)Driver; js.executeScript("return document.addEventListener("DOMContentLoaded", ready)"); 或 js.executeScript("return window.onload()");
javascript - 文档头中的脚本是否总是在 DOMContentLoaded 触发之前执行？
在以下文档中，
在哪里example.js：
日志语句是否保证执行？
javascript - 无法触发“DOMContentLoaded”事件的事件处理程序
我正在尝试在加载文档时将输出打印到控制台。下面是我写的代码。但是没有显示输出。
当我使用下面的代码时，输出显示正确。你能解释一下这种行为的原因吗？
我的简单 HTML：