window.onload与body onload （一）

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量356 收藏 1
点赞数
分类专栏： js 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shifengkuaile/article/details/84463173
版权

一、body.onload

1.1onload的基本格式：

<html>
<head>
<script type="text/javascript">
function bol(){
	alert("body");
}
</script>
</head>
<body οnlοad="bol();">
</body>
</html>

 

1.2 延迟加载：

<html>
<head>
</head>
<body οnlοad="bol();">
<script type="text/javascript">
function bol(){
	alert("body");
}
</script>
</body>
</html>

  输出：body

 

  结论：body.onload是document加载结束后触发的事件。

 

1.3代码的重载：

 

<html>
<head>
<script type="text/javascript">
function bol(){
	alert("body1");
}
</script>
</head>
<body οnlοad="bol();">
<script type="text/javascript">
function bol(){
	alert("body2");
}
</script>
</body>
</html>

 输出：body2

 

 结论：js函数的重载，是完全覆盖之前的版本。执行最新的版本。

 

1.4多次处理：

<html>
<head>
<script type="text/javascript">
function bol1(){
	alert("body1");
}
</script>
</head>
<body οnlοad="bol1();bol2();">
<script type="text/javascript">
function bol2(){
	alert("body2");
}
</script>
</body>
</html>

 输出：body1->body2

 

 结论：可以写多个函数，来供我们处理需求和调用。

 

二、window.onload

2.1基本格式：

<html>
<head>
<script type="text/javascript">
window.onload = function(){
	alert("window");
}
</script>
</head>
<body>
</body>
</html>

 输出：window

 

 

2.2

<html>
<head>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
	alert("window");
}
</script>
</body>
</html>

 输出：window

 

 结论：window.onload事件是document加载结束之后才触发。

 

2.3

<html>
<head>
<script type="text/javascript">
window.onload = function(){
	alert("window1");
}
</script>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
	alert("window2");
}
</script>
</body>
</html>

 输出：window2

 

 结论：我把这种定义onload的事件处理方式叫：匿名式。匿名式的代码会发生覆盖，后者执行。

 

2.4 懒汉式：

<html>
<head>
<script type="text/javascript">
window.onload = wol;
function wol(){
	alert("window1");
}
</script>
</head>
<body>
<script type="text/javascript">
window.onload = wol;
function wol(){
	alert("window2");
}
</script>
</body>
</html>

 

<html>
<head>
<script type="text/javascript">
window.onload = wol1;
function wol1(){
	alert("window1");
}
</script>
</head>
<body>
<script type="text/javascript">
window.onload = wol2;
function wol2(){
	alert("window2");
}
</script>
</body>
</html>

 

输出：window2

 

 结论：我把这种window.onload的处理定义方式叫做懒汉式，是因为它并不会立即执行定义，而是会发生代码的覆盖。只执行最后的代码。相比这种定义，还有一种饿汉式。

 

2.5饿汉式

<html>
<head>
<script type="text/javascript">
function wol1(){
	alert("window1");
}
window.onload = wol1();
</script>
</head>
<body>
<script type="text/javascript">
function wol2(){
	alert("window2");
}
window.onload = wol2();
</script>
</body>
</html>

  输出：window1->window2

  结论：饿汉式会立即执行。其代码执行的时机就是加载的时刻。看下面的代码也许就更清楚了：

  

<html>
<head>
<script type="text/javascript">
alert(1);
function wol1(){
	alert("window1");
}
window.onload = wol1();
</script>
</head>
<body>
<script type="text/javascript">
function wol2(){
	alert("window2");
}
alert(2);
window.onload = wol2();
</script>
</body>
</html>

 输出：1->window1->2->window2 

 

矢风快乐
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html表单window.onload,html事件绑定总结以及window.onload和document.body.onload事件
weixin_28900461的博客
06-26 769
//1 document.onkeydown如果多次监听同样的事件，那么前面的监听函数都会被最后一次的监听函数所覆盖。//如下所示：document.onkeydown = function(evt) {alert(9);};document.onkeydown = function(evt) {alert(8);};//结果是8//2 document.onkeydown和document.bo...
执行多个window.onload匿名函数的方法
weixin_45190226的博客
11-26 1027
业务需求：在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
window.onload与body.onload
weixin_39017846的博客
05-26 940
这两个都是在页面加载后运行。执行顺序和在代码中的位置有关，也和window.onload后面的函数是否匿名有关。 1.如果window.onload是在body里定义的，也就是在body onload下面定义的，则只执行window.onload，不会执行body onload。即遵循“”从上到下依次加载，后者覆盖前者“的原则”。 2.如果window.onload是在head里定义的。就要看等号后面的函数是不是匿名的。 只有非匿名的才会被执行，且两者都执行。按从上到下的顺序，先执行window.on
html表单window.onload,iframe与window.onload如何使用详解
weixin_34551601的博客
06-26 773
前言在项目上，需要等页面加载完之后再执行一个方法用于修改页面的颜色，于是导出都是在使用onload解决，然而这并不能解决我遇到的问题，因为我发现，我项目上的页面仍然没加载，折腾了很久才知道，原来是因为项目使用了很古老的iframe来操作的，必须等iframe加载完之后才能执行方法，原因分析完了，接下来我再说说，传统的，原生JS是如何使用onload的。网上很常见的方法window.onload=f...
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比
《春馨梦》的专栏
03-17 1万+
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比。 情况一：head 、body 以及body 外面的window.onload采用匿名方法。 onload 的顺序判断 /** * 加载页面 Body */ function loadBody(){ console.log("load
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
window.onload的使用方法
Q_004的博客
08-21 1780
window.onload的使用方法
window.onload用法
KekekeooeyMigo的博客
03-18 3768
在编写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++
window.onload和body.onload该放什么位置
tel15277169530的博客
07-17 2904
window.onload和body.onload时加载主函数，window.onload=mainfx可以放在前或后 body.onload=mainfx应该放在后 ，如果 放前面，body还未被浏览器渲染  ex1: /*obj.onload=mainfx; var obj=document.body;//或其它获取body的方式，var obj=document.getEle
Jqyery中同等与js中windows.onload的应用
10-28
在JavaScript中，`window.onload` 是一个非常关键的事件，用于确保在页面所有资源（包括图像、脚本、样式表等）完全加载之后再执行指定的函数或代码块。这通常用于那些依赖于页面元素存在的操作，因为这些操作需要...
页面中body onload 和 [removed] 冲突的问题的解决
09-05
当我们在同一个页面中同时使用 `body.onload` 和 `window.onload` 时，可能会遇到以下问题： 1. **事件覆盖**：如果两个事件处理函数被分别指定，那么后定义的函数会覆盖前一个，导致前面的函数不再执行。 2. **...
莱鸟介绍window.print()方法
09-02
`window.print()` 方法是JavaScript中的一个内置函数，主要用于调用浏览器的打印功能。这个方法允许开发者无须离开网页或应用即可让用户打印网页内容，非常适合于那些需要提供打印选项的网站。在本文中，我们将深入...
JavaScript中window.open用法实例详解
12-10
JavaScript中的`window.open()`函数是用于在浏览器中打开新窗口或者新标签的API，它可以用于创建一个新的浏览器窗口或者替换已存在的窗口。这个函数通常在网页交互中用来打开新的链接、弹出对话框或者进行页面间的...
ie中 body onload 和 window onload 解决法案
07-23
相对地，`window.onload` 是一个全局的事件，它关注的是整个页面（包括`<head>`和`<body>`）以及所有外部资源的加载。只有当所有资源都加载完成后，`window.onload`才会触发。使用方法如下： ```javascript window....
【React 】开发环境搭建详细指南
lph159的博客
07-24 1115
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 162
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 126
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 588
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
window.onload不生效
07-08
你可以尝试将代码放在一个自定义函数中，然后在`window.onload`事件中调用该函数。 ```javascript function init() { // 你的代码 } window.onload = init; ``` 这些是一些常见的解决方法，希望能帮助你解决问题...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值