汪的爱琪 2024-03-08 21:35 采纳率: 67.5%
浏览 21
已结题

前端的DOMContentLoaded 不触发

如果DOMContentLoaded 是在HTML 文档解析完成并且所有的 DOM 元素已经生成之后触发,那么我的为什么控制台不输出111和222?

img

img

img

img

img

  • 写回答

3条回答 默认 最新

  • Kwan的解忧杂货铺@新空间代码工作室 2024-03-08 21:37
    关注

    汪的爱琪 晚上好🌙🌙🌙
    本答案参考ChatGPT-3.5

    根据您提供的代码片段和问题描述，DOMContentLoaded 事件可能没有触发的原因在于 JavaScript 脚本的加载时机。在 HTML 中，<script> 标签被放在了 <head> 标签内，这意味着脚本会在文档的HTML解析过程中（尤其是DOM构建完成之前）就开始执行。因此，在脚本尝试监听 DOMContentLoaded 事件时，该事件可能已经触发过了。

    解决方案：

    1. 将 <script> 标签移至 <body> 标签底部，确保在它执行前 DOM 已经加载完毕：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页</title>
</head>
<body>
    <!-- ... 其他DOM元素 ... -->
    <script src="js/index.js" type="text/javascript"></script>
</body>
</html>
    1. 如果出于某些原因需要保留在 <head> 中，您可以使用异步加载（async 属性）或延迟执行（defer 属性），让浏览器在不阻塞页面解析的前提下正确处理DOMContentLoaded事件：
    <head>
    <!-- ... 其他头部内容 ... -->
    <script src="js/index.js" type="text/javascript" defer></script>
</head>

    通过以上调整，JavaScript 文件将会在DOM构建完成后执行，从而确保 DOMContentLoaded 事件可以正常触发。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • AJAX 接收不到返回参数问题 ajax javascript 前端
    2021-08-26 19:14
    回答 1 已采纳 接收不到res吗
  • 在窗口加载时显示加载图像，直到DomContentLoaded javascript jquery php
    2016-12-07 11:04
    回答 3 已采纳 PHP runs before the DOM is visible (as the DOM is in the client-side, and PHP is in the server sid
  • electron打包make后的exe模块运行不正常 electron javascript npm
    2023-02-15 14:07
    回答 6 已采纳 根据你提供的信息，我推测这是因为 'child_process应用使用了不同的运行时（Chromium 浏览器）。如果没有正确打包 Node.js 核心模块，这些模块就不能在 Electron 应用中
  • 前端的DOMContentLoaded 不触发
    2024-03-09 09:50
    汪的爱琪的博客 3.DOMContentLoaded事件在 HTML 文档解析完成并且所有的 DOM 元素已经生成之后触发,确保在上方,若在中,dom元素还未加载完全。2.后端拦截器是否允许js文件的访问。1.引入资源地址是否正确。
  • 获取input内容作为变量:代码修改 ajax html javascript
    2023-02-13 10:58
    回答 4 已采纳 您可以在 dwz.getJson 回调函数中添加生成二维码的逻辑。 首先，您需要在页面上添加一个元素，用于展示生成的二维码图片，例如： <div id="qrcode"></div&
  • playwright 如何针对网页的DIV弹层进行滚动并点击？ python 有问必答 爬虫
    2022-11-26 17:54
    回答 2 已采纳 直接requests请求分页获取数据好了（需要附带secret-key请求头） import requests import json #分页模板网址，query为关键字 pageurl='https
  • request很多方式，都被反扒了，是不是只能seleniu? python
    2021-07-21 11:35
    回答 4 已采纳 要爬 什么数据,请求的哪个网址,直接放你的代码
  • 一些前端面试题.pdf
    2024-06-20 17:42
    微前端架构是一种将大型前端应用分解成多个小型独立部署的前端服务的方法。每个服务可以独立开发、部署和扩展，提高了开发效率和可维护性。 ### 前端测试策略 前端测试通常包括三种类型：单元测试、集成测试和...
  • 这是遇到了什么反扒机制？返回错误这么长我傻了 python
    2021-07-24 11:42
    回答 3 已采纳 这是直接输出了一个页面，你用浏览器加载这个html不就清楚了...
  • net::ERR_INCOMPLETE_CHUNKED_ENCODING ajax json spring
    2016-03-31 01:25
    回答 1 已采纳 花费了好大功夫终于解决了，这里是hibernate的一个ManyToOne映射的加载方式是懒加载，json解析时解析代理对象出错，而使用jetty最新版本（9.3.6.v20151106）时居然不报错
  • laravel：如何在fullcalendar中提供数据，从控制器中的数据库中获取 ajax javascript jquery laravel php
    2019-05-10 11:15
    回答 1 已采纳 Call the getEventCalender() in a document ready function to execute after all the content has load
  • 前端大师-高级Web开发测验
    2024-05-02 17:40
    - **带有 `defer` 属性的脚本**: 也支持脚本的异步下载，但脚本会在文档解析完毕之后，DOMContentLoaded 事件触发之前执行。 ### 2. 渲染与合成过程 - **选项 D 正确**：合成过程确实发生在合成器线程上。渲染树是...
  • window.onresize 在页面未完成时无效.(用domReady绑定的方法) javascript
    2010-07-22 13:59
    回答 1 已采纳 ie确实有此问题,我的解决办法是: 在页面加载时使用setInterval 一直比较窗口宽度, 当宽度改变时调用方法, 页面加载完取消interval. 代码如下: [code="h
  • 使用前端技术开发的时钟
    2023-06-04 11:07
    8. 事件监听：为了使时钟在页面加载后立即显示正确时间，我们需要在`DOMContentLoaded`事件触发时初始化时钟。这可以通过`window.addEventListener('DOMContentLoaded', function() {...})`实现。 9. ES6+特性：...
  • 前端面试html篇1
    2022-08-04 00:44
    `defer`属性保证脚本在文档解析完成后、DOMContentLoaded事件触发前执行，保持加载顺序。而`async`属性则允许脚本并行加载，一旦加载完成就立即执行，不保证执行顺序。 `<meta>`标签则用于提供元信息，如`charset`...
  • 前端面试八股文（超详细）
    2022-03-06 17:42
    小泽今天早睡的博客 立即执行版的意思是触发事件后函数会立即执行，然后 n 秒内不触发事件才能继续执行函数的效果。 节流（throttle） **所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。**节流会稀释函数的执行频率。 对于...
  • 前端开源库-iostap
    2019-08-29 22:24
    它智能地处理了各种触摸状态，确保在不误触发的情况下提供即时反馈。这使得开发者可以使用`tap`事件来代替`click`，使得交互更加流畅。 ### 四、iostap的使用方法 1. **引入库**: 首先，你需要将`iostap.js`或`...
  • DOMContentLoaded 事件
    2024-07-29 09:49
     苦茶折柳的博客 事件是 DOM（文档对象模型）完全加载和解析完成的事件，但不需要等待样式表、图片和子框架的完成加载。换句话说，当文档的 HTML 被完全加载和解析完成之后，就会触发事件，此时 DOM 树已经完全构建，但可能还未加载...
  • Web前端开发技术-window对象.pptx
    2022-07-07 21:13
    - **`document.DOMContentLoaded`**：这个事件在DOM树构建完成时触发，但不等待外部资源如图片和样式表。如果你只需要操作DOM而不关心外部资源，使用此事件可以更快地执行代码。 ```javascript document....
  • 前端项目-domready.zip
    2019-09-02 16:42
    1. **原生DOMContentLoaded事件**：在JavaScript中，可以直接监听DOMContentLoaded事件，当DOM结构加载完毕，但不等待所有资源加载完成后，该事件会被触发。这比等待window.onload事件更快，因为它不会等待图片和...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 3月17日
  • 已采纳回答 3月9日
  • 创建了问题 3月8日

悬赏问题

  • ¥15 有人会用py或者r画这种图吗
  • ¥15 MOD04_3K图像预处理
  • ¥15 [VASP]关于超胞大小和k 点网格的收敛性测试
  • ¥15 pip下载paddle2onnx离谱错误
  • ¥60 db2move nlzxams import 导出db2备份数据报错
  • ¥15 关于#python#的问题：全文总结功能咨询
  • ¥15 俄罗斯方块中无法同时消除多个满行
  • ¥15 使用gojs3.0，如何在nodeDataArray设置好text的位置，再go.TextBlock alignment中进行相应的改变
  • ¥15 psfusion图像融合指标很低
  • ¥15 银河麒麟linux系统如何修改/etc/hosts权限为777