onload 事件
onload 事件
实例
在页面加载后立即执行 JavaScript：
<body onload="myFunction()">
完整实例：
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<h1>Hello World!</h1>
<script>
function myFunction() {
alert("Page is loaded");
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
页面下方有更多 TIY 实例。
定义和用法
onload 事件在对象被加载后发生。
onload 最常用于 <body> 元素中，用于在网页完全加载所有内容（包括图像、脚本文件、CSS 文件等）后执行脚本。
onload 事件可用于检查访问者的浏览器类型和浏览器版本，并根据这些信息加载网页的正确版本。
onload 事件也可用于处理 cookie (请参阅下面的更多实例).
浏览器支持
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| onload | 支持 | 支持 | 支持 | 支持 | 支持 |
语法
在 HTML 中：
<element onload="myScript">
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例演示如何将 "onload" 事件分配给 iframe 元素。</p>
<iframe onload="myFunction()" src="/index.php"></iframe>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中：
object.onload = function(){myScript};
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 HTML DOM 将 "onload" 事件分配给 iframe 元素。</p>
<iframe id="myFrame" src="/index.php"></iframe>
<p id="demo"></p>
<script>
document.getElementById("myFrame").onload = function() {myFunction()};
function myFunction() {
document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
在 JavaScript 中，使用 addEventListener() 方法：
object.addEventListener("load", myScript);
完整实例：
<!DOCTYPE html>
<html>
<body>
<p>本例使用 addEventListener() 方法将 "load" 事件附加到 iframe 元素。</p>
<iframe id="myFrame" src="/index.php"></iframe>
<p id="demo"></p>
<script>
document.getElementById("myFrame").addEventListener("load", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 冒泡： | 不支持 |
|---|---|
| 可取消： | 不支持 |
| 事件类型： | 如果从用户界面生成，UiEvent。否则 Event。 |
| 支持的 HTML 标签： | <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> |
| DOM 版本： | Level 2 Events |
更多实例
示例代码：
在 <img> 元素上使用 onload。加载图像后立即发出“图像已加载”的提醒：
<img src="/skin/news/images/logo1.png" onload="loadImage()" width="100" height="132">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
完整实例：
<!DOCTYPE html>
<html>
<body>
<img src="/skin/news/images/logo1.png" onload="loadImage()" width="188" height="267">
<script>
function loadImage() {
alert("Image is loaded");
}
</script>
</body>
</html
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
示例代码：
使用 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>
完整实例：
<!DOCTYPE html>
<html>
<body onload="checkCookies()">
<p id="demo"></p>
<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>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
