-
2022-03-18 11:16:20
在编写js的时候,习惯性的将script放在head中,就经常导致出现使用body中的id报错(xxx is not defined),后来发现window.onload可以解决这个问题。
这里是编写随机十六进制的颜色为例子。
<script> var color = '0123456789abcdef' var Sj = '' function co() { for (i = 0; i < 6; i++) { var j = parseInt(Math.random() * 17 - 1); Sj = Sj + color[j]; } } co(); a1.style.background = '#' + Sj; </script>
因为a1是div在body中的id名字,此script在head中,就导致了最后一行代码a1.style.background = '#' + Sj;无法正常运行,会报错a1 is not defined。
尝试修改为以下代码即可正常使用。
window.onload = function () { a1.style.background = '#' + Sj; }
查阅资料发现,此问题是页面按照顺序加载,先加载了script,然后再加载了带有id的标签,导致了script无法找到正确的id。window.onload可以让页面加载完毕后再执行里面的代码块。
更多相关内容 -
脱离document.onload和window.onload的onload事件
2015-04-29 17:12:28脱离document.onload和window.onload的onload事件,可多次添加加载事件! -
执行多个window.onload匿名函数的方法
2021-11-26 17:44:39JS代码特点:在JS语句中有两个window.onload匿名函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>执行多个window.onload匿名函数</title&g业务需求:在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> <style type="text/css"> /*类名选择器*/ .class1{height: 70px;width: 150px; text-align: center;/*设置容器中文字位置*/ border-style: dashed; border-width: 3px; border-color: #FF0099; background-color: #99CCFF;} </style> <script type="text/javascript"> /*克隆已经存在的div节点,设置其样式并添加到父元素中*/ window.onload = function () { var oDiv1 = document.getElementsByClassName("class1")[0]; var addNode = function () { var clonedDiv = oDiv1.cloneNode();//没有使用参数true var parentNode = oDiv1.parentNode; /*为克隆的新div设置样式*/ clonedDiv.innerText = "I am cloned here!" clonedDiv.style.width = "130px"; clonedDiv.style.borderStyle = "solid"; clonedDiv.style.borderColor = "#9900CC"; clonedDiv.style.borderWidth = "5px"; clonedDiv.align = "center"; /*将克隆完成的div添加到父元素里*/ parentNode.appendChild(clonedDiv); } oDiv1.onclick = addNode; } /*创建一个span元素,设置其样式并插入到“第一个div”前面*/ window.onload = function () { function creadNode() { var oSpan = document.createElement("span"); oSpan.innerText = "我是新创建的span元素!"; oSpan.style.height = "130px"; oSpan.style.borderWidth = "6px"; oSpan.style.borderStyle = "double"; oSpan.style.color = "#FF9900"; oSpan.style.margin = "4px"; var oBody = document.body; oBody.insertBefore(oSpan,oDiv1); } var oInput = document.getElementsByTagName("input")[0]; oInput.onclick = function () { creadNode(); } } </script> </head> <body> <div class="class1">网页第一个div</div><br/> <input type="button" value="点击按钮创建新的span节点,并插入到div前面"/><hr/> </body> </html>
代码问题描述:此时两个window.onload匿名函数同时运行,结果却是只会执行后面的window.onload匿名函数。
如果将其中一个window.onload匿名函数注释掉,那么另一个window.onload匿名函数就会正常执行。
注释掉创建span的JS代码执行结果:
点击按钮上面的div,会复制div节点。
注释掉复制div的JS代码执行结果:
点击按钮,会在div节点上面创建span元素。
原因描述:后面的window.onload匿名函数会把前面的覆盖。
解决方案1:<script type="text/javascript"> window.onload = function () { addNode(); creadNode(); } /*克隆已经存在的div节点,设置其样式并添加到父元素中*/ var addNode = function () { var oDiv1 = document.getElementsByClassName("class1")[0]; oDiv1.onclick = function () { var clonedDiv = oDiv1.cloneNode();//没有使用参数true var parentNode = oDiv1.parentNode; /*为克隆的新div设置样式*/ clonedDiv.innerText = "I am cloned here!" clonedDiv.style.width = "130px"; clonedDiv.style.borderStyle = "solid"; clonedDiv.style.borderColor = "#9900CC"; clonedDiv.style.borderWidth = "5px"; clonedDiv.align = "center"; /*将克隆完成的div添加到父元素里*/ parentNode.appendChild(clonedDiv); } } /*创建一个span元素,设置其样式并插入到“第一个div”前面*/ function creadNode() { var oInput = document.getElementsByTagName("input")[0]; oInput.onclick = function () { var oDiv1 = document.getElementsByClassName("class1")[0]; var oSpan = document.createElement("span"); oSpan.innerText = "我是新创建的span元素!"; oSpan.style.height = "130px"; oSpan.style.borderWidth = "6px"; oSpan.style.borderStyle = "double"; oSpan.style.color = "#FF9900"; oSpan.style.margin = "4px"; var oBody = document.body; oBody.insertBefore(oSpan,oDiv1); } } </script>
代码方案说明:
第一步:将两个业务需求(复制div节点、创建span节点)的代码封装成两个方法,即addNode();和creadNode();
第二步:将这两个方法都在window.onload匿名函数中调用。即window.onload = function () { addNode(); creadNode(); }
执行结果如下:
注意:不能直接将addNode();和creadNode();方法的实现代码直接添加到window.onload匿名函数中。否则无法正常执行代码。
解决方案2:<script type="text/javascript"> /*克隆已经存在的div节点,设置其样式并添加到父元素中*/ var addNode = function () { var oDiv1 = document.getElementsByClassName("class1")[0]; oDiv1.onclick = function () { var clonedDiv = oDiv1.cloneNode();//没有使用参数true var parentNode = oDiv1.parentNode; /*为克隆的新div设置样式*/ clonedDiv.innerText = "I am cloned here!" clonedDiv.style.width = "130px"; clonedDiv.style.borderStyle = "solid"; clonedDiv.style.borderColor = "#9900CC"; clonedDiv.style.borderWidth = "5px"; clonedDiv.align = "center"; /*将克隆完成的div添加到父元素里*/ parentNode.appendChild(clonedDiv); } } /*创建一个span元素,设置其样式并插入到“第一个div”前面*/ function creadNode() { var oInput = document.getElementsByTagName("input")[0]; oInput.onclick = function () { var oDiv1 = document.getElementsByClassName("class1")[0]; var oSpan = document.createElement("span"); oSpan.innerText = "我是新创建的span元素!"; oSpan.style.height = "130px"; oSpan.style.borderWidth = "6px"; oSpan.style.borderStyle = "double"; oSpan.style.color = "#FF9900"; oSpan.style.margin = "4px"; var oBody = document.body; oBody.insertBefore(oSpan,oDiv1); } } function addLoadEvent(func){ var oldonload=window.onload; if(typeof oldonload !="function"){ window.onload=func; }else { window.onload=function(){ oldonload(); func();} } } addLoadEvent(addNode); addLoadEvent(creadNode); </script>
具体解决方案的代码如下:
function addLoadEvent(func){ var oldonload=window.onload; if(typeof oldonload !="function"){ window.onload=func; }else { window.onload=function(){ oldonload(); func();} } } addLoadEvent(addNode); addLoadEvent(creadNode);
1.>>>>
创建一个带参数(以方法名为参数)的函数addLoadEventfunction addLoadEvent(func){}
小括号中的"func"是需要传递进addLoadEvent方法的参数,即需要传递进来的方法名称。
2.>>>>var oldonload=window.onload;
定义一个变量“oldonload”,并且将window.onload赋值给“oldonload”变量。
如果开始window.onload调用了A()函数,即window.οnlοad=function A(){… …},那么这里的oldonload就等于A()函数。
3.>>>>if(typeof oldonload !="function")
如果变量oldonload没有没有绑定传递进来的函数,即window.onload匿名函数没有绑定传递进来的func函数,则返回true,执行下面花括号{}里的内容。
4.>>>>if(typeof oldonload !="function"){ window.onload=func; }
判断语句中返回true,则接下来将window.onload赋值给传递进来的func函数。即当整个页面加载完成后再执行func函数。此种情况,后面的判断语句不会再执行。
5.>>>>else { window.onload=function(){ oldonload(); func();} }
如果
typeof oldonload !="function"
语句返回false,即
oldonload=window.onload=function A(){... ...}
换句话说,就是window.onload匿名函数已经赋值给了函数A(),
换一种表述方式就是:oldonload=window.onload=A()
此时的处理方式就是:
window.onload=function(){ oldonload(); func();}
将oldonload,也就是A()函数和传递进来的func()同时放到window.onload匿名函数里面来。
6.注意:
(1)虽然前面已经将window.onload绑定给了oldonload(),但是后面的window.onload会覆盖前面的window.onload。所以不必担心window.onload会重复。
(2)传递进function addLoadEvent(func){… …}中的函数尽量是普通函数,尽量不是绑定在window.onload上的函数。
此处可以参考前面第一种解决方案:
window.onload = function () { addNode(); creadNode(); }
其实第二种解决方案的实质就是如此,只是此种方案添加了一个判断语句,用起来显得更加优雅grace,更加专业professional。
-
window.onload
2015-07-09 16:31:28window.onload insertAfter() -
请教大佬window.onload和window.onscroll冲突问题
2019-01-21 10:29:15js里同时存在window.onload和window.onscroll,结果不能执行window.onscroll事件,请问怎么解决,谢谢!代码如下 window.onload = function () { //旋转的圆 rotate(); var circleIn = document.... -
window.onload()方法和window.onscroll()方法
2020-11-17 23:06:31下面是对window对象中 window.onload()方法和window.onscroll()方法的整理,希望可以帮助到有需要的小伙伴 JavaScript window对象 BOM中最核心的对象就是Window对象 window对象是浏览器窗口中的顶级(全局)对象 ...也许你想成为太阳,可你却只是一颗星辰;也许你想成为大树,可你却是一棵小草。于是,你有些自卑。其实,你和别人一样,也是一片风景:做不了太阳,就做星辰,在自己的星座发光发热;做不了大树,就做小草,以自己的绿色装点希望……
下面是对window对象中 window.onload()方法和window.onscroll()方法的整理,希望可以帮助到有需要的小伙伴
JavaScript window对象
BOM中最核心的对象就是Window对象
window对象是浏览器窗口中的顶级(全局)对象
window对象的属性和方法在调用时–允许省略’ window . ’
其他5个BOM对象都是作为window对象的属性出现
JavaScript window.onload
什么是 window.onload
window.onload()方法用于在页面加载完毕后立刻执行的操作,即当HTML文档加载完毕后,立刻执行的某个方法。
window.onload() 通常用于 元素,在页面完全载入后(包括图片、css文件等等)执行window.onload()里面的函数。
-
只有一个要执行的函数:
window.onload = funcRef;
- funcRef:函数类型的对象引用或者匿名函数
在页面加载完成后,调用funcRef方法
-
有多个要执行的函数:
window.onload = function(){ Func1(); Func2(); Func3(); ...... }
在页面加载完成后依次执行 Func1、Func2、Func3
使用window.onload()的好处
JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用,
如果没有渲染完成,此时的 DOM 树是不完整的,这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>window.onload()方法</title> <style> #bg { width: 100px; height: 100px; border: 5px solid red; } </style> <script> window.onload = function () { document.getElementById("bg").style.backgroundColor = "#000"; console.log("这是window.onload()方法") } </script> <!-- 如果不加window.onload()方法, 当执行到document.getElementById("bg").style.backgroundColor = "#000";的时候, 还没有加载到div对象,所以背景颜色没有设置成功 --> </head> <body> <div id="bg"></div> </body> </html>
JavaScript window.onscroll
滚动当前页面的时候,添加事件处理函数。
语法:
window.onscroll = funcRef;
- funcRef是个函数类型的对象引用或者匿名函数.
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>window.onscrolll事件</title> <script> // 滚动页面的滚动条,会触发scroll事件 window.onscroll = scroll; function scroll() { console.log("检测到页面滚动事件:" + window.pageXOffset + " " + window.pageYOffset); // 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高. } </script> </head> <body> <p>改变窗口的大小</p> <p>变成很小的尺寸</p> <p>使用滚动条</p> <p>移动页面内容</p> <p>在窗口</p> </body> </html>
注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高.
window.onload 与 jQuery ready()
-
相同点:
- window.onload和jQuery ready()都是在HTML文档执行完毕后,再执行DOM操作。
-
不同点:
语法:
window.onload = function () {}; // JavaScript $(document).ready(function () {}); // jQuery
window.onload $(document).ready() 执行时机 必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码 只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码 执行次数 只能执行一次,
如果执行第二次,那么第一次的执行会被覆盖可以执行多次,第N次都不会被上一次覆盖 简写 无 $(dunction(){
}); -
-
window.onload事件
2021-06-13 01:09:29一、网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免...每个页面只能使用一次window.onload,而且多次使用的话,只有最后一次绑定的方法可以执行!...一、网页中的某些JavaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免类似情况的发生,可以使用以下两种方式:
(1).将脚本代码放在网页的底端,运行脚本代码的时候,可以确保要操作的对象已经加载完成。
(2).通过window.onload来执行脚本代码。
每个页面只能使用一次window.onload,而且多次使用的话,只有最后一次绑定的方法可以执行!
二、例子来详解:html>
#hd{
width: 500px;
height: 300px;
background:plum;
margin: 100px auto;
}
//因为页面是从上往下走的(加载),走到script这里还没有"hd"所以页面不显示,(加载不到);
//window页面onload加载完成,意思是说页面加载完毕之后再执行function函数
//需要的时候就加window.onload:需要用js操作body里面的元素的时候,就要写window.onload
window.onload = function(){
//抓到id是hd的元素,然后绑定单击事件 单击事件名字用onclick function函数就是处理程序
//(onclick)单击这个("hd")元素,执行function()这个函数
document.getElementById("hd").onclick = function(){
alert('这样可以了吧?');
}
}
-
JavaScript--window.onload和jq的$(document).ready()
2022-02-11 14:55:33window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个。 $(documrnt).ready()可以同时编写多个,并且都可以得到执行。 3.多个的执行结果 window.onload不能同时写多个,但是有多个时会执行,... -
使用多个window.onload
2022-03-13 21:39:13使用多个window.onload -
javascript中的window.onload解释
2022-01-02 21:18:18window.onload 我们都知道的是我们的前端页面都是从上向下加载,也就是说我们的javascript文件如果放在文本页面文件的上方,我们就会先加载javascript中的文件,而此时带来的问题就是,我们的javascript中的事件... -
window.onload和window.DOMContentLoaded的区别
2020-09-28 12:48:51DOMContentLoaded页面加载更快,js更早执行,不用等待图片加载完成 -
window.onload下vue的dom层数据无法被修改解决
2022-01-23 16:36:27博文背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=... window.o -
JS中window.onload()事件
2022-03-17 17:22:572.window绑定一个onload事件 --该事件对应的响应函数将会在页面加载完成之后执行 --这样可以确保代码执行时所有的DOM对象已经加载完毕 --html执行顺序从上到下(js代码在body前面,会导致先执行js代码,再加载dom... -
window.onload和DOMContentLoaded的区别
2020-08-13 17:28:291、当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash。 二、为什么要区分? 开发中我们经常... -
window.onload 不触发的解决办法
2020-06-09 15:56:50我首先想到的就是用 window.onload = function(){...} 的方式在页面加载完后实现对应的操作。当我测试功能的时候,竟翻车了,window.onload 里面的内容完全不触发。我也做了其它的测试,包括使用 jQuery 的 ready() ... -
js中window.onload的含义作用
2022-02-02 18:17:31js中window.onload的意思 -
关于window.onload移动端不加载问题
2021-10-21 18:21:50window.onload = function fetch(){};在web端速度非常快,但是在苹果或某些浏览器不展示的问题 1.直接 function fetch(){} fetch(); 2.如果fetch是插入节点,渲染速度导致过快,建议加一个定时器 function ... -
一分钟了解window.onload和$(document).ready
2021-12-30 10:26:50window.onload和$(document).ready的区别,window.onload和DOMContentLoaded的区别,面试题 -
两个window.onload=function()冲突问题
2022-04-01 09:33:05当我在做我的课程项目的时候,我首先制作了一个table表格分页,这里我用到了js,后来我又添加了发送弹幕的...于是我就是用了两个onload()函数,将他们各自的window.οnlοad=function()封装再调用,就成功解决了 ... -
关于window.onload不起效---原生JS
2021-11-15 14:56:21今天自己在写vivo购物车(cart.js)逻辑代码的时候,遇到了window.onload不起效的问题。经过反复查看,我非常肯定我代码是没问题的。在网上查找,也没有对应的解决方法。 直接进入主题... 原因: 因为window.... -
关于window.onload不起效,也不报任何错误的问题
2022-05-06 20:16:37关于window.onload不起效,也不报任何错误的问题。因为window.onload是绑定事件,既然是绑定事件,那说明同一文件目录下的每个页面(.html)只能拥有一个window.onload事件。 -
window.onload不能正常执行
2020-06-04 11:55:01第一天的需求写了一个window.onload ,可以正常执行,第二天加了一个类似的需求,为了分开各个功能,我copy了前一天的代码,完成了功能,没有进行测试,直接上线,导致原来的代码无法运行,就像下面的代码一样 ... -
window.onload的作用
2020-12-05 17:00:17window.onload的作用 window.onload的作用,是文档和资源都加载完成后执行。 当我们把script标签放到head里面去获取元素的时候,我们会发现获取到的值是null那是因为代码从上往下执行,当获取标签的时候,标签还没有... -
window.onload事件触发条件
2021-01-26 19:34:03目录window.onload 事件触发条件:鼠标的 mouseover 事件和 mouseenter 事件的区别分析基本数据类型和引用数据类型的区别基本类型值特点:引用类型值特点:为什么要标签语义化? window.onload 事件触发条件: 当... -
window.onload用法详解
2017-11-23 09:03:18网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则...通过window.onload来执行脚本代码。 第一种方式感觉比较凌乱(其实推荐使用),往往我们需要将脚本代码放在一个更为合适的地方,那么window -
关于执行多个window.onload方法的疑惑
2021-12-02 09:49:09下面代码特点是: 在<script>标签中前面有两个wondow.onload函数,后面用addLoadEvent函数统一调用。 <!...执行多个window.onload匿名函数</title> <style type="text/css"> -
window.onload 方法的作用
2020-11-01 16:32:40window.onload的作用 我们看一下html的格式(如下): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> ... -
$(document).ready() 与window.onload的区别
2021-11-12 21:50:101.执行时间 window.onload必须等到页面内... window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onl...