onload和onunload有什么区别（代码举例说明）

最新推荐文章于 2024-07-11 16:13:04 发布

我爱数据结构qaq

最新推荐文章于 2024-07-11 16:13:04 发布

阅读量325

点赞数 4

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_80448468/article/details/139159041

版权

onload 和 onunload 是两种常用于网页中的事件处理器（event handlers），但它们处理的是完全不同的页面生命周期事件。

onload 事件会在页面或指定的元素（如图片、框架等）完成加载后触发。对于页面整体来说，onload 事件在 DOM 完全加载和解析完成后触发，并且还会等待样式表、图像和子框架完成加载。这意味着在 onload 事件触发之前，用户可能还无法看到或交互页面上的所有内容。

示例代码（页面加载时触发）：

html复制代码

	`<!DOCTYPE html>`
	`<html lang="en">`
	`<head>`
	`<meta charset="UTF-8">`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`<title>Onload Example</title>`
	`<script>`
	`window.onload = function() {`
	`console.log('页面已完全加载！');`
	`// 在这里，你可以安全地访问和操作 DOM 元素`
	`};`
	`</script>`
	`</head>`
	`<body>`
	`<!-- 页面内容 -->`
	`</body>`
	`</html>`

在这个例子中，当页面完成加载后，控制台会输出 "页面已完全加载！"。

需要注意的是，onunload 事件在现代浏览器中已被限制使用，因为它可能会干扰用户的导航行为。通常建议使用 beforeunload 事件，它会在窗口、文档或资源将要卸载之前触发。这常用于在用户尝试离开页面时提示他们是否有未保存的更改。

示例代码（页面卸载前触发）：

html复制代码

	`<!DOCTYPE html>`
	`<html lang="en">`
	`<head>`
	`<meta charset="UTF-8">`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`<title>Beforeunload Example</title>`
	`<script>`
	`window.addEventListener('beforeunload', function(event) {`
	`// 浏览器会显示默认的对话框或你自定义的消息（如果支持）`
	`event.returnValue = '你确定要离开页面吗？'; // Gecko, Trident, Chrome 34+`
	`return event.returnValue; // Gecko, WebKit, Chrome <34`
	`});`
	`</script>`
	`</head>`
	`<body>`
	`<!-- 页面内容 -->`
	`</body>`
	`</html>`

在这个例子中，当用户尝试关闭浏览器标签页或导航到其他页面时，浏览器会显示一个默认的对话框（或自定义的消息，如果浏览器支持），询问用户是否确定要离开页面。

总结来说，onload 和 beforeunload（或曾经的 onunload）事件分别用于处理页面加载完成和页面卸载之前的事件，它们在网页应用的生命周期中扮演着重要的角色。

关注