onload-händelsen

DOM-händelser Event-objekt

Definition och användning

onload-händelsen inträffar efter att objektet har laddats.

onload används mestadels i <body>-elementet, för att köra skript när webbsidan har laddat alla innehåll (inklusive bilder, skriptfiler, CSS-filer m.m.).

onload-händelsen kan användas för att kontrollera besökarens webbläsartyp och version och ladda rätt version av webbsidan baserat på denna information.

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

实例

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

<body onload="myFunction()">

亲自试一试

例子 2

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

<img src="w3javascript.gif" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
  alert("Image is loaded");
}
</script>

亲自试一试

例子 3

使用 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>

亲自试一试

语法

在 HTML 中：

<element onload="myScript">

亲自试一试

在 JavaScript 中：

object.onload = function(){myScript};

亲自试一试

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

object.addEventListener("load", myScript);

亲自试一试

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技术细节

冒泡： 不支持
可取消： 不支持
事件类型： 如果从用户界面生成，UiEvent。否则 Event。
支持的 HTML 标签： <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
DOM-version: Nivå 2-händelser

Webbläsarstöd

Händelser Chrome IE Firefox Safari Opera
onload Stöd Stöd Stöd Stöd Stöd
DOM-händelser Event-objekt