js中一个标签在按顺序执行没有被读取到时可以用window.onload
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> </head> <body>
<div id='box'>
<input type='button' value='按钮' id='btn'>
</div>
<script> var btn=document.getElementById('btn');
btn.onclick=function(){
alert('hello world!')} </script>
</body>
</html>
这个可以直接点击既可执行
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> var btn=document.getElementById('btn');
btn.onclick=function(){
alert('hello world!')} </script>
</head> <body>
<div id='box'>
<input type='button' value='按钮' id='btn'>
</div> </body>
</html>
以上代码就不能通过点击来弹出，
因为浏览器是从上到下从左到右读取和显示html文档，如果不加window.onload的情况下把<script>标签写在<input>标签之前，比如我要var btn=document.getElementById('btn')获取到id名为“btn”的这个input元素，
这时input标签在下面浏览器还没有读取到input标签，浏览器就会报错。
所以改为如下既可
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script> window.onload=function(){
var btn=document.getElementById('btn');
btn.onclick=function(){
alert('hello world!')}} </script>
</head> <body>
<div id='box'>
<input type='button' value='按钮' id='btn'>
</div>
</body>
</html>
下面转自 http://www.softwhy.com/forum.php?mod=viewthread&tid=6191
window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行，否则可能导致无法获取对象的情况，为了避免这种情况的发生，可以使用以下两种方式:
一.将脚本代码放在网页的底端，这样在运行脚本代码的时候，可以确保要操作的对象已经加载完成。
二.通过window.onload来执行脚本代码。
第一种方式感觉比较凌乱（其实推荐使用），往往我们需要将脚本代码放在一个更为合适的地方，那么window.onload方式就是一个良好的选择。window.onload是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。先看一段代码实例:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法-蚂蚁部落</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">document.getElementById("bg").style.backgroundColor="#F90";</script></head><body> <div id="bg"></div></body></html> |
以上代码的初衷是向将div的背景颜色设置为#F90，但是并没有实现此效果，这是因为代码是顺序执行的，当执行到document.getElementById("#bg").style.backgroundColor="#F90"这一句的时候，还没有加载到此div对象，所以设置也就不能够成功。代码修改如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>位置高度div垂直居中-蚂蚁部落</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.onload=function(){ document.getElementById("bg").style.backgroundColor="#F90";}</script></head><body> <div id="bg"></div></body></html> |
以上代码实现了将div背景颜色设置为#F90的目的。原因就是讲设置背景颜色的代码放置在window.onload的事件处理函数中，只有当文档加载完成后，才会执行事件处理函数，也才会执行设置背景颜色的脚本代码。
事件处理函数绑定:
方式一:
window.onload=function(){}，在以上代码中就是使用此种方式为window.onload事件绑定事件处理函数，这里绑定的是一个匿名函数，当然也可以绑定非匿名函数，代码实例如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法详解-蚂蚁部落</title><script type="text/javascript">window.onload=function myalert(){ alert("绑定成功！");}</script></head><body></body></html> |
以上代码可以将为名myalert方法绑定到window.onload事件上，但是不能以以下方式为此事件绑定多个事件处理函数:
|
1
2
|
window.onload=function a(){}window.onload=function b(){} |
以上代码并不能为window.onload事件绑定多个事件处理函数，而是最后一个会覆盖前面的所有函数。不过代码可以变通一下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法-蚂蚁部落</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.onload=function(){ function a(){ document.getElementById("bg").style.backgroundColor="#F90"; } function b(){ document.getElementById("bg").style.width="200px"; } a(); b();}</script></head><body> <div id="bg"></div></body></html> |
以上代码实现了绑定多个事件处理函数同样的效果。
方式二:
可以使用addEventListener()和attachEvent()为onload事件绑定事件处理函数，下面分别介绍一下：
addEventListener()是当前标准的一种事件处理函数绑定方式，但是IE8和IE8以下的浏览器并不支持此方式，实例如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法-蚂蚁部落</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.addEventListener("load",bg,false);window.addEventListener("load",changeW,false);function bg(){ document.getElementById("bg").style.backgroundColor="#F90";}function changeW(){ document.getElementById("bg").style.width="200px";}</script></head><body> <div id="bg"></div></body></html> |
以上代码可以为window.onload事件绑定多个事件处理函数。简单介绍一下语法格式:
|
1
|
addEventListener("type",函数名,false) |
addEventListener()函数具有三个参数，第一个参数事件类型，需要注意的是，事件类型名称前面不能有on，例如window.onload事件，在这个地方只能写作load，第二个参数是要绑定的函数名称，第三个参数一般为false。
使用attachEvent()函数绑定事件处理函数:
IE9之前的的IE浏览器不支持addEventListener()函数，所以attachEvent()函数就有了用武之地了，代码实例如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法-蚂蚁部落</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">window.attachEvent("onload",bg);window.attachEvent("onload",changeW);function bg(){ document.getElementById("bg").style.backgroundColor="#F90";}function changeW(){ document.getElementById("bg").style.width="200px";}</script></head><body> <div id="bg"></div></body></html> |
以上代码的效果和使用addEventListener()函数的效果是一样的，简单介绍一下语法格式:
|
1
|
addEventListener("type",函数名) |
此函数只有两个参数，第一个参数是事件类型，不过它和addEventListener()的第一个参数的作用是一样，但是名称有所区别，名称前面是具有"on"，第二个参数就是要绑定的事件处理函数名称。为了兼容各浏览器，需要将以上代码进行改造，实例如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>window.onload用法-蚂蚁部落</title><style type="text/css">#bg{ width:100px; height:100px; border:2px solid red;}</style><script type="text/javascript">if(window.addEventListener){ window.addEventListener("load",bg,false); window.addEventListener("load",changeW,false);}else{ window.attachEvent("onload",bg); window.attachEvent("onload",changeW);}function bg(){ document.getElementById("bg").style.backgroundColor="#F90";}function changeW(){ document.getElementById("bg").style.width="200px";}</script></head><body> <div id="bg"></div></body></html> |
以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判断:
|
1
2
3
4
5
6
|
if(object.addEventListener){ object.addEventListener();}else{ object.attachEvent();} |
通过if语句判断对象是否具有addEventListener属性，如果有这使用addEventListener()函数，否则使用attachEvent()函数。
js中一个标签在按顺序执行没有被读取到时可以用window.onload的更多相关文章
- jsp中一个标签两种方式绑定两个click事件导致未执行的问题
近日,在开发过程中,写了一个标签 <li id="a1" onclick="doSomething()">...</li> 在js页面中 ...
- js中页面加载完成后执行的几种方式及执行顺序
1:使用jQuery的$(function){}; 2:使用jquery的$(document).ready(function(){});前两者本质上没有区别,第1种是第2种的简写方式.两个是docu ...
- js中页面加载完成后执行的几种方法及执行顺序
在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...
- js的并行加载与顺序执行
javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问 ...
- js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】
一个老项目中,一个jsp文件中有很多个js文件, 现在要在页面上的一个地方判断一个状态,因为一直找不到原来是在哪里修改的那个状态,所以决定不找了,而是在比较靠前引入的一个js中定义一个全局变量,然后在 ...
- js的并行加载以及顺序执行
重新温习了下这段内容,发现各个浏览器的兼容性真的是搞大了头,处理起来很是麻烦. 现在现总结下并行加载多个js的方法: 1,对于动态createElement('script')的方式,对所有浏览器都是 ...
- 项目中一次排序规则的改动，注意到js中map的遍历的顺序
背景:项目需要对前端页面上某个插件的下拉选择项进行排序,需要按照配置的顺序显示. 首先调查后台,发现sql语句中已经添加order by.之后发现查询结果遍历后封装进HashMap,这里改为LinkH ...
- Android中让多个线程顺序执行探究
线程调度是指按照特定机制为多个线程分配CPU的使用权. 有两种调度模型:分时调度模型和抢占式调度模型. 分时调度模型:是指让所有的线程轮流获得cpu的使用权,并且平均分配每个线程占用的CPU的时间片. ...
- 面试官：Java中线程是按什么顺序执行的？
摘要:Java中多线程并发的执行顺序历来是面试中的重点,掌握Java中线程的执行顺序不仅能够在面试中让你脱颖而出,更能够让你在平时的工作中,迅速定位由于多线程并发问题导致的"诡异" ...
随机推荐
- Java中JNI的使用详解第四篇:C/C++中创建Java对象和String字符串对象及对字符串的操作方法
首先来看一下C/C++中怎么创建Java对象:在JNIEnv中有两种方法是用来创建Java对象的: 第一种方法: jobject NewObject(jclass clazz , jmethodI ...
- 查看hadoop压缩方式
bin/hadoop checknative 来查看我们编译之后的hadoop支持的各种压缩,如果出现openssl为false,那么就在线安装一下依赖包 bin/hadoop checknativ ...
- 一句话下载总结(用于后渗透上传payload)
利用ftp来下载payload文件 echo open 192.168.1.1 21> ftp.txt echo ftp>> ftp.txt echo bin >> ft ...
- NX二次开发-UFUN获取当前所在的模块UF_ask_application_module
NX9+VS2012 #include <uf.h> #include <NXOpen/UI.hxx> #include <NXOpen/MenuBar_MenuBarM ...
- fread读入挂and普通读入挂and浮点数读入挂
fread读入挂 版本一 namespace fastIO { #define BUF_SIZE 100000 //fread -> read bool IOerror = 0; inline ...
- LeetCode 704. Binary Search (二分查找)
题目标签:Binary Search 很标准的一个二分查找,具体看code. Java Solution: Runtime: 0 ms, faster than 100 % Memory Usage ...
- 2019 牛客多校第六场 B Shorten IPv6 Address
题目链接:https://ac.nowcoder.com/acm/contest/886/B 题目大意 给定一个 128 位的二进制 ip 地址,让你以 16 位一组,每组转成 16 进制,用冒号连接 ...
- 使用豆瓣源安装python包
Python pip安装的原理就是从Python的官方源https://pypi.python.org/pypi下载到本地安装, 但是访问官方源网络不稳定,速度较慢,我经常会遇到一个问题,pip安装包 ...
- jQuery Ajax请求 .net 一般处理程序
初学ajax 一个简单的功能,调试了2个小时,代码如下虽然成功了 但是有错误 <!DOCTYPE html> <html> <head> <meta http ...
- 第一周课堂笔记1th
1. 计算机基本组成 CPU:中央处理器,人的大脑 内存:临时存储数据 (特点:断电即消失,容量小12G 24G) 硬盘:永久存储数据(特点:断电不消失容量大,500G 1T) ...