window.onload:页面加载完毕后触发的事件,页面需要加载的内容主要包括文本,图片,视频,js,css;元素的onload事件是元素自己加载完毕时触发而body的onload是页面内容全部加载完成后触发,这里主要说下body的加载事件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>加载事件</title>
<script type="text/javascript">
window.txt1.value = '张三';
</script>
</head>
<body>
<input type="text" id="txt1" value="" />
</body>浏览器是一边下载文档,一边解析执行,所以在JavaScript中操作某个元素时而这个元素还没有加载进来就会报 window.txt1为空或不是对象 这样的错误信息,因为网页内容不是由网站一次性全部发回来的,每一种请求都有单独的响应(时间非常短,都是以毫秒为单位,所以感觉像是一次性的),当网速慢有时可以看到文本已呈现,排版错乱,表示css还没有加载进来,可通过浏览器的Network(360,谷歌等)查看响应信息
解决上述问题的方法:如果js是写在元素的上面比如haed标签中则将操作页面元素的代码写在window的onload事件中;或者将js书写在元素下面,此时元素已加载完成可以操作此元素
//方式1
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加载事件</title>
<script type="text/javascript">
window.onload = function () {
window.txt1.value = '张三';
}
</script>
</head>
<body>
<input type="text" id="txt1" value="" />
</body>
//方式2
<body>
<input type="text" id="txt1" value="" />
<script type="text/javascript">
window.txt1.value = '张三';
</script>
</body>通过window.控件Id操作元素的方式不建议使用,以后会通过类似document.getElementById(“控件Id”);的方式操作页面中的元素
本文暂时没有评论，来添加一个吧(●'◡'●)