关于JavaScript使用window.onload的解释说明

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.4k 收藏 3
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mfysss/article/details/129133869
版权

文章目录

window.onload简介

window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。

window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。
只有一个要执行的函数语法：

window.onload = funcRef;

在页面加载完成后 funcRef 方法会被调用。

有多个要执行的函数语法：

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

在页面加载完成后自动依次执行 Func1、Func2、Func3。

为什么使用window.onload()

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

可以试试下面的代码有什么效果

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>没有使用 window.onload() 测试</title>
<style type="text/css">
#bg{
    width:120px;
    height:120px;
    border:4px solid blue;
}
</style>
<script type="text/javascript">
document.getElementById("bg").style.backgroundColor="#F00";
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

以上实例我们要实现的效果是将 div 的背景颜色设置为 #F90，但是并没有实现此效果，因为代码是顺序执行的，当执行到 document.getElementById("#bg").style.backgroundColor="#F00" 的时候，还没有加载到此 div 对象，所以背景颜色没有设置成功。报错信息如下：
在这里插入图片描述
我们可以添加 window.onload 就可以正常执行，代码修改如下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>使用 window.onload() 测试</title>
<style type="text/css">
#bg{
    width:120px;
    height:120px;
    border:4px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
    document.getElementById("bg").style.backgroundColor="#F00";
}
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

绑定有名的函数

window.onload 事件绑定事件处理函数，绑定的是一个匿名函数，当然也可以绑定具名函数，代码实例如下:

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>使用 window.onload() 绑定具体函数</title>
<script type="text/javascript">
 
// 函数名为 runoob
window.onload=function runoob(){
  document.write("菜鸟教程 -- 学的不仅是技术，更是梦想！！！");
}
</script>
</head>
<body>
  
</body>
</html>

绑定执行多个函数

有多个要执行的函数实例：

<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<title>使用 window.onload() 执行多个函数</title>
<style type="text/css">
#bg{
  width:100px;
  height:100px;
  border:2px solid blue;
}
</style>
<script type="text/javascript">
window.onload=function(){
    function runoob1(){
        document.getElementById("bg").style.backgroundColor="#F00";
    }
    function runoob2(){
        document.getElementById("bg").style.width="200px";
        document.getElementById("bg").style.height="200px";
    }
    runoob1();
    runoob2();
}
</script>
</head>
<body>
    <div id="bg"></div>
</body>
</html>

window.onload 与 jQuery ready() 区别

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

以上两种方式都是在 HTML 文档完毕后再执行 DOM 操作，但它们还是有一定的区别，如下图：
在这里插入图片描述

参考：菜鸟教程JavaScript window.onload

没反应说说说
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一张表格告诉你windows.onload()与$(document).ready()的区别
12-11
浏览器加载完DOM后，会通过javascript为DOM元素添加事件，在javascript中，通常使用[removed]()方法。 在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。   [removed]() $(document).ready() 执行时机 在页面所有元素（包括图片，引用文件）加载完后执行。 页面中所有HTML DOM，CSS DOM结构加载完之后就会执行，其他图片可能没有加载完. 如果想要网页所有内容（包括图片等）加载完毕，再注册事件，使用$(window).load(function); 等价于wi
JavaScript中onload()用法
m0_49273322的博客
06-22 7006
实例： 页面加载之后立即执行一段 JavaScript： <html> <head> <script> function load() { alert("页面已加载！"); } </script> </head> <body "load()"> <h1>Hello World!</h1> </body> </html> 定义和用法 onloa
javascript学习笔记.docx
05-24
共70页，复制两页供参考，如下： 1 JavaScript基本语法 1) 读未声明的变量会产生错误。写未声明的变量会是JavaScript环境自动产生一个全局变量。 2) 对于完全等同“===”，两个null或者两个undefined是等同的；但null与undefined是不等同的。 3) 对于相等“==”， null与undefined是相等的。若值与对象比较，核心语言内部类会尝试用valueof()转换，再尝试用toString()转换。就是说valueof()会比toString()有更高的优先级。但规则不绝对，例如Date类，它会首先尝试用toString()转换。当类的这两个方法实现不一致时，在要进行类型转换时指定具体的实现方法比较安全。 4) 在比较运算中，若一个对象或值被转换成NaN（Not a Number），则永远返回false。 5) in可以检查指定字符串是否是一个对象的基本属性或方法名称；instanceof运算符返回左边的对象是否右边类的一个实例；delete可以删除一个属性，它不会影响到属性关联的对象的生存，若该属性不存在会返回true；[]可以以字符串的方式存取对象的属性。 6) typeof函数的返回值：数字——number，字符串——string，布尔值——Boolean，对象、数组、null——object，函数名——function或undefined（未定义时）。主要用来区别区别对象和原始类型。要区分对象的具体类型，用instanceof运算符。 7) 在函数体内有隐含的arguments对象，可取得所有传入的参数，可用类似数组的方式读/写各参数，length属性表示参数的个数。但函数的只读属性length表示函数实际定义的参数个数。一个名为callee的属性代表函数本身。 8) 构造函数也是函数，但它通过new调用，无返回值。函数体内通过this来取得将要初始化的对象。 9) 对象的方法可用this对对象自身进行操作，其它方面与普通的函数没有任何区别。 10) 每个类都有一个原型（prototype）对象，它具有一套属性和方法，用来共享一个类的方法和常量，还有一个constructor的属性引用构造函数。 11) JavaScript中面向对象的特性： a) 实例属性：在构造函数创建或初始化的属性。 b) 实例方法：在构造函数中把原型对象中的一个属性设为函数来实现。 c) 类属性：构造函数本身的属性。 d) 类方法：用合适的函数作为构造函数本身的一个属性。 e) 子类：把原型对象赋值为父类的一个实例，默认父类为Object的实例。同时还要将prototype.constructor赋值为子类的构造函数自己。 f) 继承：只是在查询一个属性时自动发生，而不会在写属性时发生，就是说单写一个父类的属性时，JavaScript环境会为对象本身创建一个同名的属性，从此该属性就覆盖了父类中的属性。 12) 创建一个数组可用 new Array() 。可以在构造函数参数中指定数组的前n个元素的值。数组的元素可以具有任意类型，甚至是另外一个数组。同一数组中可以存在不同类型的元素。数组的length是可读写的。这也是缩短一个数组的唯一方法。 2 客户端JavaScript 2.1 Window类 1) Window类的实例是全局对象，用它的window或者self属性可引用它自己。 2) 一个应用程序出现的每个窗口或框架都对应一个Window对象，而且都为客户端JavaScript代码定义了一个唯一的执行环境。 3) 脚本执行过程是Web浏览器的HTML解析过程的一部分。脚本按照它们的出现顺序执行。 4) 简单的对话框可用：alert()、 confirm()、 prompt()之一。 5) 时间间隔方法为： setInterval()、 cleraInterval() 。 6) onerror属性指明错误处理的方式。 navigator属性包含Web浏览器总体信息。 screen属性包含显示器的信息。 7) 打开窗口用open()方法，返回值是被打开的窗口。调用应该明确指明是window.open()，以避免和document.open()方法混淆。同时还应该调用focus()方法使窗口成焦点保证窗口可见。opener属性是打开自己的那个窗口，若是用户手动打开，这位null。 8) 关闭窗口用window.close()方法，窗口关闭后，代表它的Window对象可能还生存，可用closed属性进行判断它是否已经被关闭。 9) 控制窗口几何大小可用moveTo()、moveBy()、resizeTo()、resizeBy()。滚动可用scrollTo、scrollBy()。 10) 成焦点和失焦点可用 focus()、blur()。 11) location属性代表当前显示文档的URL。对其赋值使浏览器装载新的URL（用Back按钮能回退到原页面）。其实，它是Location类的一个实例，它还有一个reload()方法可以装载信的URL（用Back按钮不能回退到原页面）。 12) history属性可看成是代表历史URL的一个特殊数组，它的可读length属性表明数组的长度。支持三种方法back()、forword()、go()。 13) 一个窗口中的任何框架都可以使用属性frames、parent和top引用窗口中的其它框架。 14) 若框架指定了名字，引用就会被存储到它的父Window对象的一个同名新属性中。 15) 自定义的函数和构造函数只在定义它的窗口中可见。别的窗口要先通过一个属性来引用。但JavaScript默认的函数和构造函数会在每个窗口中拥有独立副本。 16) onload()和onunload()事件分别在网页装载完成后和卸载前执行。
获取本机IP地址的实例(JavaScript / Node.js)
11-26
–web 客户端JavaScript <!-- 调用方式 --> <body onload="checkCookie()"></body> function getYourIP() { const RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection; if (RTCPeerConnection) (function() { const rtc = new RTCPeerConnection({iceServers: []})
Jqyery中同等与js中windows.onload的应用
10-28
我们知道，在javascript中用来执行页面加载中的操作时候，我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可，在jQuery中也有相当的代码
JavaScript中的onload详解
初心 - 杨瑞超个人博客
09-09 6749
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416 下面我们先写代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt
JavaScript的window.onload事件的理解
热门推荐
zhansan的博客
05-21 2万+
window.onload()的作用 window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。 window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。 只有一个要执行的函数语法： window.onload = funcRef; 在页面加载完成后 funcRef 方法会被调用。 有多个要执行的函数语法： window.οnlοad=function(){ Func1(); Fun
js中window.onload的含义作用
爬楼梯的前端小白的博客
02-02 6067
js中window.onload的意思
javascript 中的图像加载事件
迹忆客
07-06 716
我们需要创建一个警告框，当 onload 事件在图像上触发时，它将显示一条消息，说明图像已成功加载。如果我们不想使用 JavaScript，我们可以使用 HTML 属性来检查图像是否已加载。因此，在这些属性的帮助下，我们可以创建一个警告框，在加载图像时显示一条消息，说明图像已成功加载。在 HTML 中，onload 属性在图像加载成功时触发，而 onerror 属性在加载图像时发生错误时触发。如果在加载图像时发生错误，它将显示一条消息，指出图像未加载。如果我们运行代码，它会显示图像加载成功的警告消息。
js中onload方法作用
2201_75474092的博客
12-11 245
在页面加载完成后运行function中的js语句。
详解JavaScript中getFullYear()方法的使用
12-01
javascript Date.getFullYear()方法按照本地时间返回指定日期的年份。通过getFullYear返回的值是一个绝对的数字。对于1000年和9999之间的日期，getFullYear返回一个4位数字，例如2008年。 语法 Date.getFullYear() ...
javascript函数的解释
02-26
javascript函数的解释，解释了具体函数的功能，一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:...
JavaScript 中的图像加载事件
six6de6的博客
08-18 2858
JavaScript 中的图像加载事件的简单解析
【JAVAScript】——onload，onbeforeunload，onunload区别
气派飞鹰的博客
06-03 590
onload onunload onbeforeunload 三个事件的区别 onload是在页面载入的时候触发，与之相反onunload是在页面关闭（卸载）的时候触发，至于onbeforeunload是指页面将要关闭的时候触发（一般用于弹出是否确认关闭的时候） 打开页面时：onload 关闭页面时：onbeforeunload–>onunload 刷新网页时：onbeforeunload–>onunload–>onload ...
JS中window.onload()事件
weixin_44134816的博客
03-17 2938
1.onload事件会在整个页面加载完成后才会触发 2.window绑定一个onload事件 --该事件对应的响应函数将会在页面加载完成之后执行 --这样可以确保代码执行时所有的DOM对象已经加载完毕 --html执行顺序从上到下（js代码在body前面，会导致先执行js代码，再加载dom对象），window.onload()可以解决这个问题 例如： window.onload=function(){ ---函数中放js代码 } ...
JS中页面加载事件window.onload、onload()、document.onclick
xiaokangmiclong的博客
11-20 8782
当我们刷新页面的时候，有时需要页面自动加载一些事件来达到预期效果，现介绍下面三种方法Onload()、addLoadEvent()、document.onclick。 onload() 事件会在页面或图像加载完成后立即发生。注意是在页面或图像加载后才发生，所以当页面有很大数据量没加载完时，onload()事件不会发生。而addLoadEvent()会在页面刷新的时候发生，document.o
同一个页面上出现多个window.onload方法，如何规避方法被覆盖
m0_66962220的博客
10-25 677
在前端开发中，是一个非常重要的事件。它会在页面加载完成后触发，这意味着我们可以在这个事件处理程序中执行一些必要的初始化操作，比如绑定事件、初始化插件等等。但是，在某些情况下，可能会出现一个页面出现两个的情况，这会导致其中一个事件处理程序被覆盖，从而导致一些意外的问题。在上面的代码中，只有 "第二个 onload" 会在页面加载完成时被打印到控制台。因为第二个覆盖了第一个。那么，如何规避一个页面两个呢？
js加载事件（onload）
zag666的博客
10-27 6538
onload 事件会在页面或图像加载完成后立即发生，同时执行被调用的程序。 onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 使用方法： 在 HTML 中: <body οnlοad="fun()"></body> 在 JavaScript 中: window.οnlοad=function(){Some...
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 363
步骤很详细，直接上教程……
``` window.onload ```在javascript中window.onload怎么用
01-27
在JavaScript中，`window.onload`是一个事件，它在整个页面加载完成后触发。可以通过给`window.onload`赋值一个函数来指定页面加载完成后要执行的操作。 以下是`window.onload`的使用方法示例： ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值