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是一个事件，当文档加载完成之后就会触发该事件，可以为此事件注册事件处理函数，并将要执行的脚本代码放在事件处理函数中，于是就可以避免获取不到对象的情况。先看一段代码实例:

[HTML] 纯文本查看复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<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对象，所以设置也就不能够成功。代码修改如下:

[HTML] 纯文本查看复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<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事件绑定事件处理函数，这里绑定的是一个匿名函数，当然也可以绑定非匿名函数，代码实例如下:

[HTML] 纯文本查看复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>window.onload用法详解-蚂蚁部落</title>

<script type="text/javascript">

window.onload=function myalert()

{

alert("绑定成功！");

}

</script>

</head>

<body>

</body>

</html>

以上代码可以将为名myalert方法绑定到window.onload事件上，但是不能以以下方式为此事件绑定多个事件处理函数:

[JavaScript] 纯文本查看复制代码运行代码

1 2	`window.onload=function` `a(){}` `window.onload=function` `b(){}`

以上代码并不能为window.onload事件绑定多个事件处理函数，而是最后一个会覆盖前面的所有函数。不过代码可以变通一下:

[HTML] 纯文本查看复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<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以下的浏览器并不支持此方式，实例如下:

[HTML] 纯文本查看复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<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事件绑定多个事件处理函数。简单介绍一下语法格式:

[JavaScript] 纯文本查看复制代码运行代码

1	`addEventListener("type",函数名,false)`

addEventListener()函数具有三个参数，第一个参数事件类型，需要注意的是，事件类型名称前面不能有on，例如window.onload事件，在这个地方只能写作load，第二个参数是要绑定的函数名称，第三个参数一般为false。
使用attachEvent()函数绑定事件处理函数:
IE9之前的的IE浏览器不支持addEventListener()函数，所以attachEvent()函数就有了用武之地了，代码实例如下:

[HTML] 纯文本查看复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<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()函数的效果是一样的，简单介绍一下语法格式:

[JavaScript] 纯文本查看复制代码运行代码

1	`addEventListener("type",函数名)`

此函数只有两个参数，第一个参数是事件类型，不过它和addEventListener()的第一个参数的作用是一样，但是名称有所区别，名称前面是具有"on"，第二个参数就是要绑定的事件处理函数名称。为了兼容各浏览器，需要将以上代码进行改造，实例如下:

[HTML] 纯文本查看复制代码运行代码

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

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

以上代码代码解决了各大浏览器的兼容性问题。在上面代码中使用以下代码进行判断:

[JavaScript] 纯文本查看复制代码运行代码

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中线程的执行顺序不仅能够在面试中让你脱颖而出,更能够让你在平时的工作中,迅速定位由于多线程并发问题导致的"诡异" ...

随机推荐

CSP-S2019旅游记
CSP-S2019 你问我为什么写旅游记? 因为好像除了旅游我今年啥都没干 Day0 校内模拟一直被吊锤,考前几场几乎要爆零这提莫就不是什么好兆头在家二刷水淹东京完回学校,带了一大堆家当上车去广 ...
视频质量评测标准——VMAF
阿里云视频云直播转码每天都会处理大量的不同场景.不同编码格式的直播流.为了保证高画质,团队借助VMAF标准来对每路转码的效果做质量评估,然后进行反馈.调优.迭代.这么做的原因在于,像动作片.纪录片.动 ...
thinkphp 快速缓存
如果你的存储数据没有有效期的需求,那么系统还提供了一个快速缓存方法F可以用来更快的操作. 大理石平台厂家 F方法可以支持不同的存储类型,如果是文件类型的话,默认保存在DATA_PATH目录下面. 快速 ...
NX二次开发-UFUN计算两点距离UF_VEC3_distance
NX11+VS2013 #include <uf.h> #include <uf_curve.h> #include <uf_vec.h> UF_initializ ...
NX二次开发-设置经典工具栏的可见性UF_UI_set_toolbar_vis
NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...
Java-javaFx库运用-自动弹跳的球
(1)定义一个名为BallPane的类,用于显示一个弹动的球: (2)定义一个名为BounceBallControl的类,用来使用鼠标动作控制弹球,当鼠标按下的时候动画暂停,当鼠标释放的时候动画恢复执 ...
ionic：目录
ylbtech-ionic:目录 1.返回顶部 1. http://www.runoob.com/ionic/ionic-tutorial.html 2. 2.返回顶部 3.返回顶部 4.返回 ...
linux网络速率监控
#!/bin/bash #作者:fafu_li #时间: #监控网卡传输速率 source /etc/profile #加载系统环境变量 source $HOME/.bash_profile #加载用 ...
VO和DO的区别
阿里巴巴Java开发手册中的DO.DTO.BO.AO.VO.POJO定义分层领域模型规约: DO( Data Object):与数据库表结构一一对应,通过DAO层向上传输数据源对象. DTO( Da ...
assignment of day nine
一.简述定义函数的三种方式 1.空函数:用于占位 2.有参函数:有参数的函数 3.无参函数:没有参数的函数二.简述函数的返回值 1.如果函数没有返回值,默认返回None 2.函数可以通过return ...

js中一个标签在按顺序执行没有被读取到时可以用window.onload

js中一个标签在按顺序执行没有被读取到时可以用window.onload的更多相关文章

随机推荐

热门专题