我的JS代码无法处理初始加载/页面更改
问题描述：我的JS代码无法处理初始加载/页面更改。
解决方案：
- 确保JS代码正确加载：在HTML文件中，确保将JS文件正确引入，并且位于<body>标签的底部。这样可以确保JS代码在HTML元素加载完毕后执行，避免出现无法处理初始加载的问题。
- 使用DOMContentLoaded事件：在JS代码中，可以使用DOMContentLoaded事件来确保DOM树加载完毕后再执行代码。这样可以避免在DOM元素未完全加载时执行JS代码导致的问题。示例代码如下：
document.addEventListener("DOMContentLoaded", function() {
// 在这里编写需要在DOM加载完毕后执行的代码
});- 监听页面更改事件：如果需要在页面更改时执行JS代码，可以使用MutationObserver来监听DOM树的变化。当DOM树发生变化时，可以触发相应的回调函数执行代码。示例代码如下：
// 选择需要观察的目标节点
var targetNode = document.querySelector('body');
// 创建一个观察器实例
var observer = new MutationObserver(function(mutationsList) {
for(var mutation of mutationsList) {
// 在这里编写需要在页面更改时执行的代码
}
});
// 配置观察器选项
var config = { attributes: true, childList: true, subtree: true };
// 传入目标节点和观察器的配置
observer.observe(targetNode, config);- 腾讯云相关产品推荐：
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估。
相关·内容
所以我有一个外部插件，并且我在我的custom.js中包含了他们的JS。它们工作得很好，直到我从另一个页面访问该页面(初始加载)。刷新页面后，JS开始工作。 $('.js-t
浏览 18提问于2019-07-25得票数 0
我使用swup.js进行页面转换，并通过AJAX更改内容。不幸的是，重力表单似乎不能很好地处理AJAX请求，并且我的表单在转换后无法正常工作。我使用以下代码在页面加载时重新初始化我的脚本：
document.addEventListener('swup:pageView', (event)
浏览 33提问于2020-03-05得票数 5
1回答
我试图在一个表中显示来自查询的记录，然后单击按钮进行ajax调用，以xml格式下载信息。查询从一个类中的方法执行，ajax请求调用同一个类中的另一个方法。但是，当我尝试从同一个类中读取属性时，我得到的是空值，并且foreach返回一个错误。这是我的ajax请求(downloaderScript.js)： $("#downloadBtn").click(function (event) {
浏览 3提问于2019-11-26得票数 0
3回答
我有一些服务器端代码，它输出一个项目的<ul>，用户可以编辑这些条目并将更改发布回服务器。我现在正在开发一个“添加新”功能，它向<ul>添加了一个新项目，当单击“保存更改”按钮时，它将被回发到服务器上。当用户单击"Add“按钮时，我将执行附加<li>标记的客户端代码(由服务器端代码生成的相同标记)。
令我烦恼的是裁员。这意味着，如果要更改</em
浏览 6提问于2013-07-10得票数 2
回答已采纳
3回答
我要在这里陈述我的问题。我有一个index.html页面，其中包含一个prettyPhoto.js脚本。我的index.html上有一些菜单链接。假设其中一个是“视频库”，现在我通过Ajax加载视频库，它加载得很好。但问题是，我无法让prettyPhoto.js在外部加载的文件中工作。有人知道怎么做吗？Inde
浏览 1提问于2011-12-12得票数 1
回答已采纳
1回答
背景：我有一个具有以下简单架构的chrome扩展:背景页触发弹出窗口。在extensionRoot/popup/index.html上。该弹出文件从/ popup /目录中加载了几个资源，其中包括几个图像、一个css文件和一个大型javascript文件。问题：
浏览 6提问于2016-07-17得票数 0
回答已采纳
我在获取react_on_rails的Redux store中遇到了一个问题，在那里我想切换页面，但它不能正确地为我工作。如果我更改或重新加载页面，我将丢失redux存储。另外，我很抱歉我放了一堆代码，但我真的不知道其他任何东西或方法来修复它，react_on_rails和redux的官方文档对我没有帮助，它更有可能让我
浏览 30提问于2019-03-20得票数 0
6回答
我正在使用的应用程序使用了更多的JQuery，这是我以前处理过的，我试图更好地理解JQuery document.ready()对web应用程序的作用。，这些现在将加载并准备为网站的每一页(通过包含的.js文件)。但是，我也可以将它们放在网站的每个单独页面上的单独的document.ready
浏览 0提问于2011-07-23得票数 6
回答已采纳
1回答
我正在构建一个新的主页WordPress模板。模板使用显示Vimeo视频，这是一个简单的标题和描述。.flexslider .slides > li { -webkit-backface-visibility: hidden我尝试从<li>标记中删除内联样式。我也尝试过删除我正
浏览 0提问于2016-01-12得票数 0
回答已采纳
我试图为浏览器扩展找到正确的JavaScript代码，该扩展将网页文本中的“冬天”替换为“夏天”。我要过滤器从一开始就开始工作。第二次尝试
我的第二次尝试是基于到一个StackOverflow帖子。这是一篇涉及到的文章，但“添加节点的朴素枚举”一节
浏览 3提问于2021-11-12得票数 1
场景1:工作场景2:发布
现在，我想做以下几点。我将通过在的地址栏中键入地址来打开上一页。因此
浏览 0提问于2012-01-30得票数 0
我的Angular 7应用程序上有一个导航栏。我还有一个自定义的javascript文件，它会在应用程序初始加载时加载。在我的应用程序中单击链接以路由到另一个组件后，外部javascript文件停止工作/不加载。当我单击链接以路由到不同的组件时，如何才能加载或保持加载此javascript文件？我已经正确地将javascript文件添加
浏览 31提问于2019-05-31得票数 2
我正在学习JavaScript，并试图与Rails一起使用它。我有默认的Rails项目结构，并创建了一个简单的assets/javascript/test.js文件。资产/javascript/test.js：console.log(elements[0]);
控制台中的结果未定义，但当我添加下一段代码
浏览 1提问于2015-11-13得票数 3
回答已采纳
1回答
在url中单击后不工作的砌体
、、、、
在我的rails应用程序中，我试图实现砖石。我的问题是，当我点击链接(图片)砌体不工作，但如果你点击后，你刷新页面，它是工作的。有什么想法吗？谢谢代码：<head>
<script src="/assets/jquery.swipebox.js</
浏览 2提问于2016-03-15得票数 0
回答已采纳
1回答
我喜欢使用History.js，因为它具有处理历史的能力(pushState等)。在较旧的浏览器中，但我需要禁用默认行为，该行为自动将散列转换为“正常”url路径。我的意思是，在默认情况下，脚本将link#hash更改为链接/哈希。很好的一点是，如果将状态推送为"otherlink"，就会给老浏览器#otherlink哈希，这样仍然可以处理它，但我需要它在加载页
浏览 3提问于2013-11-11得票数 0
1回答
我正在构建一个由几个jquery移动页面组成的项目，每个页面都有一个导航栏。当我刷新页面时，该函数正常工作。尝试将“$(文档).ready(函数() {
浏览 1提问于2013-04-06得票数 3
回答已采纳
1回答
我在Wordpress站点上实现了一个PJAX (推态AJAX)库来处理页面转换，当页面内容被更新时，除了Wordpress插件之外，所有东西都按预期加载。这是因为我已经用jS重新初始化了所有其他的东西，但是我在不费力地重新加载页面的情况下，只能在需要的情况下重新初始化Wordpress插件。在页面之间更改时，
浏览 0提问于2022-02-07得票数 0
我有一个主要使用AJAX调用加载的网站。当页面第一次加载时，只加载一次javascript和CSS文件。
我的问题是javascript/CSS可能与HTML和服务器端代码不同步。页面可以使用javascript文件的旧版本(从页面首次加载时开始)，而服务器端代码和加载ajax的HTML文件总是使用最
浏览 2提问于2016-04-17得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
