轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

onload 事件

❮ DOM 事件 ❮ Event 对象

实例

在页面加载后立即执行 JavaScript：

<body onload="myFunction()">
亲自试一试 »

页面下方有更多实例。

定义和用法

onload 事件在对象被加载后发生。

onload 最常用于 <body> 元素中，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本。

onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载网页的正确版本。

onload 事件也可用于处理 cookie (请参阅下面的更多实例).

浏览器支持

事件
onload Yes Yes Yes Yes Yes

语法

在 HTML 中:

<element onload="myScript">
亲自试一试 »

在 JavaScript 中:

object.onload = function(){myScript};
亲自试一试 »

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("load", myScript);
亲自试一试 »

注释: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions.

技术细节

是否支持冒泡: No
是否支持取消: No
事件类型: 如果从用户界面生成，UiEvent。否则 Event。
支持的 HTML 标签: <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM 版本: Level 2 Events

更多实例

实例

在 <img> 元素上使用 onload。加载图像后立即发出"图像已加载"的提醒：

<img src="btjavascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>
亲自试一试 »

实例

使用 onload 事件处理 cookie：

<body onload="checkCookies()">

<script>
function checkCookies() {
  var text = "";

  if (navigator.cookieEnabled == true) {
    text = "Cookies are enabled.";
  } else {
     text = "Cookies are not enabled.";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>
亲自试一试 »

❮ DOM 事件 ❮ Event 对象