使用javascript_pack_tag时，DOMContentLoaded不会在导航后触发，而是在页面重新加载时触发
使用javascript_pack_tag时，DOMContentLoaded事件不会在导航后触发，而是在页面重新加载时触发。
DOMContentLoaded事件是在HTML文档解析完成并且所有DOM节点都已经构建完成后触发的事件。它表示页面的初始HTML文档已经完全加载和解析，并且DOM树已经构建完成，但是外部资源（如图片、样式表、脚本等）可能还没有加载完成。
在使用javascript_pack_tag时，它会将JavaScript打包成一个单独的文件，并在页面加载时引入该文件。当页面重新加载时，浏览器会重新解析HTML文档并加载JavaScript文件，此时才会触发DOMContentLoaded事件。
由于DOMContentLoaded事件是在页面重新加载时触发，所以它不会在导航后触发。导航后的页面刷新或重新加载会导致整个页面重新加载，包括HTML文档和所有资源文件的重新加载，因此DOMContentLoaded事件会在页面重新加载时触发。
在实际开发中，可以利用DOMContentLoaded事件来执行一些需要在DOM构建完成后进行的操作，例如初始化页面元素、绑定事件处理程序等。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（ECS）：提供可扩展的计算容量，支持多种操作系统，适用于各种应用场景。详情请参考：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务，支持自动备份、容灾等功能。详情请参考：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：提供安全可靠、高扩展性的对象存储服务，适用于存储和处理各种类型的文件和数据。详情请参考：https://cloud.tencent.com/product/cos
- 人工智能平台（AI Lab）：提供丰富的人工智能算法和模型，支持图像识别、语音识别、自然语言处理等应用。详情请参考：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等功能。详情请参考：https://cloud.tencent.com/product/iothub
相关·内容
1回答
使用javascript_pack_tag时，DOMContentLoaded不会在导航后触发，而是在页面重新加载时触发
javascript、ruby-on-rails、reactjs、dom、webpack
今天我发现了一个奇怪的行为，我的React组件在从链接导航到页面后不会呈现。但是，在页面重新加载时，会呈现我的组件。，在单击导航到页面的链接后不会呈现组件。在页面重新加载时，将呈现该组件。 我尝试了很多方法。在new_post.jsx中，在注释掉所有内容并只
浏览 21提问于2019-05-11得票数 4
回答已采纳
2回答
如果我导航到页面，则DOMContentLoaded不起作用，只有在刷新时才起作用
javascript、reactjs、domcontentloaded
正如我所提到的，DOMContentLoaded中的代码仅在我刷新页面时运行，但是如果我导航到该页面，表中的数据将不再显示。我在这里看到了一个非常相似的帖子(DOMContentLoaded not firing after navigation but fires on page reload when using javascript_pack_tag/axios";
document.addEventL
浏览 160提问于2020-06-13得票数 0
回答已采纳
1回答
未定义Map对象的问题
javascript、html
我正在为一个游戏创建一个角色类，但是当我尝试做任何事情时，它都不起作用。只有当页面完全加载时，才会发生这种情况。在正常情况下，如果我在加载DOM内容时运行它，它就能工作，但是如果我等待这么长时间，游戏字符有时会产生未加载或处于加载状态的图像。它扭曲了正确的形象。
浏览 1提问于2022-09-25得票数 0
回答已采纳
1回答
更改页面禁用Rails上的导航栏菜单
javascript、html、css、ruby-on-rails、web
当屏幕宽度低于1024 in时，导航条将更改为响应式导航条，当单击汉堡包菜单时会激活该条，这是使用javascript (它正在正确编译，文件是在application.js中导入)进行的。这个功能可以正常工作，但是当我改变页面(例如从家里到商店)时，它就停止工作了，我找不到原因。下面是代码：document.addEventListener('DOMContentLoaded
浏览 5提问于2021-10-26得票数 0
2回答
Javascript:运行函数当页面完成加载时，脚本正在加载异步
javascript、asynchronous
我找不到可靠的方法来找什么时候，页面已经完成加载。', completed);}
问题是DOMContentLoaded在document.readyState被设置为“完成”之前就被触发了，这意味着回调永远不会被调用。当我的函数运行时，DOMContentLoaded已经被触发，但是document.readyState === 'interactive'已经被触发了。但是，由于document.ready
浏览 5提问于2015-07-09得票数 3
回答已采纳
1回答
Puppeteer:一旦一个特殊的元素已经出现，就不要再等待一个缓慢的页面
javascript、puppeteer、pyppeteer
我需要访问一些独立的URL，其中页面的元素加载非常慢。完成整个页面的加载通常需要几分钟时间。然而，这个页面只有一小部分是有用的。有用的部分可以通过页面上的某个选择器来指示。因此，我想知道我是否可以告诉木偶人停止等待页面，一旦键选择器已经出现，以加速速度。有很多答案告诉我们应该使用await page.waitForSelector('.class_sample');page = await b
浏览 0提问于2020-06-17得票数 0
3回答
什么是oncontentready事件？
javascript、jquery、html
如何使用此事件？我想要将htc文件转换为jquery。请帮助解释此事件。
浏览 0提问于2011-07-05得票数 1
1回答
Jquery不适用于Rails
javascript、jquery、ruby-on-rails、syntax、rubygems
在我添加的rails.In comments.js文件上使用jquery有困难//= require jquery_ujs $(".comments-section").toggle();})
在我的
浏览 2提问于2016-07-19得票数 0
1回答
如何检测每个页面的加载？
javascript、dom-events、domcontentloaded
我试图捕捉上的每一个页面负载//@include https://forum.vivaldi.net/*(function (){ alert('A new page is loaded');
浏览 2提问于2020-03-30得票数 0
回答已采纳
1回答
Shopify签出液体模板页:load事件和DOMContentLoaded之间有什么区别？
javascript、shopify、shopify-template
页面之间有什么区别:加载和常规的JavaScript DOMContentLoaded事件？
浏览 3提问于2022-04-27得票数 0
回答已采纳
1回答
React物化-css不会在第一次呈现时初始化
reactjs、materialize
由于某种原因，当我第一次导航到它们所在的页面时，不是初始化了物化-css组件。它们会在我刷新页面后初始化。我花了几个小时试图找出问题，但找不到我做错了什么。，在这里我初始化了物化-css组件： var context = this;
document.addEventListener('DOMContentLoadeddocument.querySelectorAll('.timepicker
浏览 3提问于2020-05-10得票数 0
回答已采纳
4回答
何时调用document.appendChild()？
javascript
在我的页面中，我动态地添加了一个脚本，函数如下： var s = document.createElement( 'script' );s.setAttribute( 'src', src );}document.onreadystatechange = funct
浏览 0提问于2017-10-13得票数 2
2回答
NextJs <Link>不会重新运行脚本
javascript、reactjs、typescript、next.js、next-link
当我在NextJs中使用<Link>标记在页面之间导航时，它不会在更改页面后重新运行我的脚本。它只在第一个页面加载后或我按下重新加载时运行脚本。当使用普通的<a>标记时，它可以正常工作，因为页面在每次导航之后重新<e
浏览 12提问于2022-10-27得票数 0
回答已采纳
1回答
如何使DOM操作在SPA视图上进行更改和加载？
javascript、jquery、single-page-application
我目前正在开发一个单一的页面应用程序(遵循)，并面临两个障碍。
解决了问题。作为一种功能，它不会在重新加载应用程序时执行。
浏览 6提问于2020-04-22得票数 0
2回答
javascript location.reload不会以错误的方式重新加载页面
javascript、html、onclick、onclicklistener、reload
每次用户单击该按钮时，我都会刷新页面，以便将页面设置为源代码。但是location.reload()是在代码之后执行的，而不是在开始时执行的。btn.addEventListener("click", () => { //code...为什么在单击按钮时不立即重新加载页面，但只在<
浏览 3提问于2022-07-17得票数 0
回答已采纳
1回答
在rails中使用turbolinks时如何监听加载事件？
ruby-on-rails
我正在使用带有turbolink的Rails。我想触发一些load页面事件的脚本。问题是TL不会在页面导航上触发此事件。页面导航时不会出现此日志： console.log('load');它会在整个页面刷新时被激活。我的目标是
浏览 0提问于2019-06-02得票数 0
2回答
Splidejs视频未显示
javascript、video、slider
我正在使用splidejs将视频加载到幻灯片中。正在加载视频扩展名，但未呈现任何视频。我已经检查过了，我可以看到代码中的任何问题。v=cdz__ojQOuU"></li> </div>document.addEventListener( 'DOMContentLoaded
浏览 3提问于2020-09-14得票数 2
3回答
为什么"load事件不能在addEventListener()上工作“？
javascript
在加载页面的body元素之后，我尝试记录一些内容，但是日志没有出现在控制台中。我做错了什么？
浏览 4提问于2019-11-06得票数 2
回答已采纳
3回答
jQuery移动端-页面初始化和页面创建只触发一次
jquery、jquery-mobile
我使用的是1.0版，到目前为止，这个项目非常简单，只有三个页面的索引上只有脚本。我一开始错误地使用了$(document).ready(function() { ... });，然后阅读了文档，正确的做法是绑定pageinit或pagecreate。以下是我为测试目的而使用的脚本(直接从文档中获取)： alert( 'This page was这在第一次加载<
浏览 1提问于2011-11-25得票数 3
回答已采纳
1回答
在jQuery手机中做$(文档).ready的正确方法是什么？
jquery、jquery-mobile、document-ready
假设我想要在jQuery移动设备完成UI呈现后运行一些代码。mobileinit事件不起作用，因为它是在这种情况发生之前引发的。在谷歌上快速搜索似乎表明，简单地使用$(document).ready不能与JQM一起工作；但我只是尝试了一下(根据mobileinit调用)，它对我很有效:我的代码运行并动态更新元素，等等都很好。所以我想知道，是不是有什么原因我不应该使用它(它不可靠或者搞乱了JQM)，或者是关于它的信息根本不准确？我遗漏了什么？
更新：有关演示，请参阅。
浏览 14提问于2011-07-29得票数 19
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
