杂谈——window_onload=function(){}不执行的原因

最新推荐文章于 2025-05-28 10:49:38 发布
原创 最新推荐文章于 2025-05-28 10:49:38 发布 · 4.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #onload #function

本文探讨了JavaScript代码在网页中执行的时机问题，重点解析了window.onload事件的特性及其对JS执行的影响。通过实例说明，当页面DOM加载完毕，web浏览器才能运行JS，否则window.onload不会触发，导致代码不执行。建议将JS代码置于body底部以确保执行。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

今天写一个页面，发现有一部分js代码怎么都没有执行，但是把这段js和body中的代码单独提出来之后又可以运行了。

后来才发现是window.onload = function(){}的特性造成的，因为当页面DOM对象加载完毕，web浏览器能够运行JS时，该方法才被触发。

也就是说，window.onload是在页面加载完成之后执行的函数，如果你的你页面没有加载完毕，或者说某个东西没有加载出来，卡在那了，那么window.onload就不会执行.所以说为了保险起见，js代码可以写在body里面的最下面，也可以写在body的下面（写在这里肯定会执行的，因为页面已经加载完了）。

 

js里面windows.onload函数不执行
weixin_34365417的博客
07-24 7150
2019独角兽企业重金招聘Python工程师标准>>> ...
执行多个window.onload匿名函数的方法
weixin_45190226的博客
11-26 1131
业务需求：在body里面创建一个div元素，点击div元素能够复制div节点，将复制后的div加载到原有的div节点后面，并且重新设置克隆后的div节点的样式。 JS代码特点：在JS语句中有两个window.onload匿名函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>执行多个window.onload匿名函数</title&g
JS相关window.onload= function(){}里定义函数无法调用
博客
02-25 4345
z
深入探讨JavaScript页面生命周期事件：onload, onunload, onbeforeunload
最新发布
weixin_34640289的博客
05-28 1058
onunload事件是当用户离开页面或者关闭浏览器标签页时触发的 JavaScript 事件。它常用于执行清理操作，如关闭数据库连接、删除临时文件或通知服务器用户已离开。onunload事件处理函数通常与window对象关联。是一个浏览器事件，它在窗口、文档或其资源即将卸载之前触发。这个事件允许页面在被关闭或刷新之前执行一些清理工作，或者提示用户是否真的想要离开当前页面。这个事件对于执行确认操作特别有用，比如防止用户丢失未保存的数据。为了自定义。
window.onload 函数不执行处理
LEveryDay
04-26 5786
Google Chrome window.onload =
java函数不执行_[Java教程]JavaScript: window.onload = function() {} 里面的函数不执行
weixin_39646412的博客
02-28 384
[Java教程]JavaScript: window.onload = function() {} 里面的函数不执行02018-07-18 02:00:40问题：写了一个最简单的页面。在script标签中使用的 window.onload = function() { function add() { //... } }页面上：但是，函数不仅没有触发，同时控制台报错：add() is not de...
如何处理window.onload常见不生效的问题？
向着太阳迎着光
12-08 1942
是一个常见的页面加载事件，但在实际开发中，可能由于多个事件、脚本加载顺序问题或动态内容加载等原因，导致它无法按预期工作。使用来代替是一个好的实践，可以避免事件冲突。通过调整脚本加载顺序、异步加载资源等方法，可以确保页面内容在执行脚本时已经准备好。这种方式能使你的代码更灵活、可靠，避免常见的加载顺序或资源冲突问题。
JavaScript原生系列-页面加载完成之后执行（window onload 和 $().ready(function) 以及 body onload="">）
pcaxb的专栏
09-09 8309
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址：https://blog.csdn.net/pcaxb/article/details/100661841 JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及 <body onload="">） 目录 1.原生window...
原生 JavaScript 中 window.onload 全局加载模块中定义的函数 不能执行的一些问题
Python美丽星球--微信(Felixzfb)
07-23 1441
一个关于在window.onload里面定义函数，然后在html里面调用函数时出现错误。具体见下面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Com
JNI_OnLoad调用时机
hty1053240123的专栏
02-07 5319
解决window.onload延迟加载问题
weixin_30432179的博客
06-23 714
window.onload方法，表示当页面所有的元素都加载完毕，并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容。这样肯定保证了代码在domReady之后执行。使用window.onload方法在文档外部资源不多的情况下不会有什么问题，但是当页面中有大量远程图片或要请求的远程资源时，我们需要让js在点击每张图片时，进行相应的操作，如果此时外部资源还没有加载完毕，点...
关于window.onload移动端不加载问题
qq_38482205的博客
10-21 1371
window.onload = function fetch(){};在web端速度非常快，但是在苹果或某些浏览器不展示的问题 1.直接 function fetch(){} fetch(); 2.如果fetch是插入节点，渲染速度导致过快，建议加一个定时器 function fetch(){} setTimeout(() => { fetch(); }, 1000); ...
onload js函数不执行的原因分析及解决方法
zm_bingxindan的专栏
10-27 1937
今天打开网站的时候，发现很多页面的信息都没有显示出来，仔细观察了之后，发现都是onload的js函数没有执行的原因。其实之前曾发现过这个情况，我以为是网站出了问题，然后采用多种方法试图让onload的js能够执行，又是重新生成网页、又是重启站点、重启IIS，甚至重启服务器都干过，我的想法是可能网页速度太慢了而导致没有执行onload的js函数。 onload js函数不执行的原因分析及解决方
window.onload加载js函数不起作用
zhituji的博客
01-14 7939
使用window.onload加载函数，不起作用 其实是不同js都使用了window.onload加载应用于同一个页面这样通常只有第一个js文件中的函数会被调用。 例： first.js window.onload=function(){ function one(){ ... } } second.js window.onload=function(){
window.onload不能正常执行
彭世瑜的博客
06-04 2363
第一天的需求写了一个window.onload ，可以正常执行，第二天加了一个类似的需求，为了分开各个功能，我copy了前一天的代码，完成了功能，没有进行测试，直接上线，导致原来的代码无法运行，就像下面的代码一样 <script> // 第一天写的代码 window.onload = function () { console.log("window.onload1"); }; // 第二天加的需求 window.onload = function () {
window.onload方法不执行也不报错的解决办法之一
qq_34309663的博客
11-12 3508
window.onload方法不执行也不报错的解决办法之一
关于window.onload不起效，也不报任何错误的问题
m0_61420899的博客
05-06 5170
关于window.onload不起效，也不报任何错误的问题。因为window.onload是绑定事件，既然是绑定事件，那说明同一文件目录下的每个页面（.html）只能拥有一个window.onload事件。
为什么window.onload=func()会出错
Ben我要上天
06-23 1836
目录 [TOC]window.onload=func()运行时发生了什么作为javascript初学者，在学习使用 window.onload 事件调动函数时，常常会大意地写成：window.onload = func();//当 func() 中需要使用DOM读取网页节点时，必定报错当 func() 中需要使用DOM读取网页中的节点时，func()无法正常运行，且浏览器报错。但使用下面正确的格式
js函数为什么不能够放在window onload中
yuan_qh的博客
10-13 2295
 今天在jsp中的form表单利用onclick=”xxx”来监听js中一个function xxx(){}函数，遇到一个很奇怪的问题就是点击submit按钮之后竟然没有响应xxx()函数。在这之前我已经多次在form表单中利用onclick=”xxx”来监听一个函数，并没有出现过这种情况。这经过多次尝试后，和具体分析，与之前的对比，终于找到为何会出现这个问题。为了直表述问题所在我用一个实例的代码...
window.onload = function(
02-16
### 正确设置和使用 `window.onload` 函数 在 JavaScript 中，`window.onload` 是一个事件处理程序属性，用于指定当整个页面完全加载完成后要运行的脚本。这包括所有的依赖资源如样式表、图像和其他媒体文件。 如果直接给 `window.onload` 赋值一个新的函数，则会覆盖之前已经赋好的任何其他 `onload` 处理器[^1]： ```javascript // 这种方式会导致后者覆盖前者 window.onload = one; window.onload = two; // 后者覆盖了前者, 只有 "two" 会被触发 ``` 为了确保可以注册多个负载事件处理器而不互相干扰，应该采用一种方法来安全地附加额外的功能而不会丢失现有的行为。下面是一个实用的例子展示如何实现这一点: #### 安全添加多个 `onload` 事件处理器 通过创建辅助函数 `addLoadEvent` 来管理这些回调，这样就可以多次调用此函数并累积所有希望被执行的任务列表，而不是简单替换掉原来的 `onload` 属性值[^2]: ```javascript function addLoadEvent(func){ var oldOnload = window.onload; if (typeof oldOnload !== 'function'){ window.onload = func; } else { window.onload = function(){ oldOnload(); func(); }; } } // 使用自定义的帮助函数添加两个不同的操作 addLoadEvent(function (){ console.log('First task completed'); }); addLoadEvent(function (){ console.log('Second task also done!'); }); ``` 这种方法允许开发者在一个页面上轻松地安排一系列按顺序执行的动作，在不破坏原有逻辑的前提下扩展功能。 值得注意的是，虽然上述技术有效解决了多监听器的问题，但在现代浏览器环境下推荐使用更灵活且不易出错的方式——即利用 `addEventListener()` 方法来订阅 `load` 事件，它支持同一类型的多个独立监听器，并且语法更加直观清晰[^3]。 对于那些熟悉 jQuery 的开发人员来说，也可以考虑使用其提供的 `.ready()` 或简化的 `$()` 形式的文档就绪状态检测机制作为替代方案之一[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值