首先看如下三段代码,你觉得运行结果会是什么呢?
onload1.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>onload test1</title>
<script type="text/javascript">
function init() {
try {
text = document.createTextNode("Hello world 2222");
document.body.appendChild(text);
} catch (e) {
alert("Error");
}
}
window.onload = init();
</script>
</head>
<body>
Hello world 1111
</body>
</html>
onload2.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>onload test2</title>
<script type="text/javascript">
function init() {
text = document.createTextNode("Hello world 2222");
document.body.appendChild(text);
}
window.onload = function() {
init();
};
</script>
</head>
<body>
Hello world 1111
<br>
</body>
</html>
onload3.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>onload test3</title>
<script type="text/javascript">
function init() {
text = document.createTextNode("Hello world 2222");
document.body.appendChild(text);
}
</script>
</head>
<body onload="init()">
Hello world 1111
<br>
</body>
</html>
你是否认为三段代码执行的结果是相同的呢?即页面显示的是:
Hello world 1111
Hello world 2222
实际的结果是:
对于onload1.jsp,会先
跳出"Error"提示框,然后
页面显示Hello world 1111;
而对于onload2.jsp和onload3.jsp则会出现如下的运行结果:
Hello world 1111
Hello world 2222
这是什么原因呢?
对于onload2.jsp和onload3.jsp,这是onload的常见用法(两种实际效果是一样的),此时,onload脚本会在页面加载完成后执行,否则,结果就应该是:
Hello world 2222
Hello world 1111
而对于onload1.jsp,区别于后两种的地方在于,”window.onload = init();”这行代码中的init后面跟着一对括号,导致onload脚本在页面(也许说文档更准确)未加载完成前就开始执行,而且先于body元素执行,这样当执行init函数时,异常就不可避免地发生了,因为此时就没有body元素。
补充:
window.onload同时执行多个函数的解决办法
分享到:
相关推荐
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
window.onload insertAfter()
有需要的朋友是最好的参考资料。希望有所帮助!
我们知道,在javascript中用来执行页面加载中的操作时候,我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可,在jQuery中也有相当的代码
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。这时就要用window.attachEvent和window.addEventListener来解决一下,需要的朋友可以参考下
selenium会弹出网页窗口,因为它重写了window.open在文件selenium-browserbot.js函数BrowserBot.prototype.modifyWindowToRecordPopUpDialogs中的newOpen,但这必须在window.onload之后创建才有效。对于HTTPS安全性...
资源名称:15天漫游jQuery中文翻译 word版内容简介:15天漫游jQuery中译本,不是很完整,但是也是学习jquery 不可或缺的东东1 day Window.onload() 一直是常用的javascript函数。数年来程序员们习惯了通过它在...
window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })
<!...<html xmlns="http://www.w3.org/1999/xhtml" > function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) ... scrW = window.innerWidth ...<body onload="main();"> </html>
浅谈js图片前端预览之filereader和window.URL.createObjectURL //preview img : filereader方式 document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile')....
腾迅Web前端开发工程师笔试题及答案 ...function elementName(evt){ evt = evt|| window.... window.onload = function(){ var el = document.getElementsByTagName('body'); el[0].onclick = elementName; } ......
关于 Image 对象 onload 事件。 想获取的是 image 的 宽高值。所以用 onload 方法。另外是获取的远程图片。 但IE在第二次显示图片的时候,总是不走 onload 方法。代码: var img = new Image(); img.src = ...
其中,window.onload方法是页面所有资源加载完成之后触发,因此性能较差;(document).ready方法是在页面dom元素加载完成之后触发,性能较好。 总体而言,页面渲染完毕时间监听是前端开发中一个非常重要的环节,能够...
window.onload = function() { var myShakeEvent = new Shake({ threshold: 15 }); myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); function ...
window.onload = function () { window.setInterval("ajaxpage('dummy/top.txt','top',{color:'blue',opacity:0.25})", 3000); window.setInterval("ajaxpage('dummy/left.txt','left',{color:'black', opacity:...
window.onload = function(){ initAnimate() } function initAnimate(){ drawBg(); lastTime = new Date(); animate(); } var lastTime; function animate(){ ctx.save(); ctx....
NULL 博文链接:https://snandy.iteye.com/blog/666530
window.onload与$(function(){})区别包括页面所有的图片加载完成才会回调(晚)只能有一个监听回调页面加载完成就回调(早)可以有多个监听。
window.onload=function(){SetWidth()}; window.onresize=function(){SetWidth()}; function SetWidth(){ if(!document.getElementById) return; var w=$("gallery").offsetWidth-20; if(w>0 && w!=null){ $(...