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()函数。

<p><script type="text/javascript"></p>
<p>function init(){</p>
<p> alert("页面加载完毕！");</p>
<p>}</p>
<p>window.onload=init;</p>
<p></script></p>
我们经常使用 window.onload 来处理页面，当页面加载完成做一些事情。但这个 window.onload 是页面全部加载完成，甚至包括图片
1. window.onload = function(){}
2. window.onload ＝ functionName; // [color=red]注意:没有括号
3. IE:
window.attachEvent("onload",functionName);
FF:
window.addEventListener(); // 参数怎么写我忘了, 请自己搜索
body onload="init();"事件是等doucment加载完成再加载相应的脚本
document.onreadstatechange()是指当对象状态变更时触发脚本
<script type="text/javascript">
function init() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// create the "page loaded" message
var text = document.createTextNode("Page loaded!");
var message = document.getElementById("message");
message.appendChild(text);
};
/* for Mozilla */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, null);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script defer src=ie_onload.js><"+"/script>");
/*@end @*/
/* for other browsers */
window.onload = init;
</script>
<p id="message"></p>
示例
<script for=window event=onload>
function inint(){
alert("文档加载完成")
}
</script>
<script language="Javascript">
function document.onreadystatechange()
{
DoLayout();
window.onresize = DoLayout;
Composition.document.open()
Composition.document.write("<head><style type=\"text/css\">body {font-size: 10.8pt}</style><meta http-equiv=Content-Type content=\"text/html; charset=gb2312\"></head><BODY bgcolor=\"#FFFFFF\" MONOSPACE></body>");
Composition.document.close()
Composition.document.designMode="On"
}
</script>
这两种加载脚本的方式只针对IE游览器才有效
<script type="text/javascript">
function init(){
alert("页面加载完毕！");
}
window.onload=init;
</script>
<html>
<body onload="init()">
</body>
</html>

window.onload用法详解:的更多相关文章

网站开发进阶(十三)window.onload用法详解
window.onload用法详解网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本 ...
Extjs Window用法详解
今天我们来介绍一下Extjs中一个常用的控件Window.Window的作用是在页面中创建一个窗口,这个窗口作为容器,可以在它里面加入grid.form等控件,从而来实现更加复杂的界面逻辑. 本文的示 ...
Extjs Window用法详解 3 打印具体应用，是否关掉打印预览的界面
Extjs Window用法详解 3 打印具体应用,是否关掉打印预览的界面 Extjs 中的按钮元素 {xtype: 'buttongroup',title: '打印',items: [me.ts ...
【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解
Ext.Net通过DirectEvents进行服务器端异步的事件处理.[Ext.Net学习笔记]02:Ext.Net用法概览.Ext.Net MessageBus用法.Ext.Net布局中已经简单的 ...
jQuery 事件用法详解
jQuery 事件用法详解目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jque ...
eval()函数用法详解
eval()函数用法详解:此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eval()函数的用法.语法结构: eval(str) 此函数可以接受一个字符串str作为参数, ...
转载 LayoutInflater的inflate函数用法详解
http://www.open-open.com/lib/view/open1328837587484.html LayoutInflater的inflate函数用法详解 LayoutInflater ...
JavaScript中return的用法详解
JavaScript中return的用法详解最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
selenium用法详解
selenium用法详解 selenium主要是用来做自动化测试,支持多种浏览器,爬虫中主要用来解决JavaScript渲染问题. 模拟浏览器进行网页加载,当requests,urllib无法正常获取 ...

随机推荐

杭电ACM1003
原题: Max Sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
HTML <label> 标签
定义:<label> 标签为 input 元素定义标注(标记). 用法: label 元素不会向用户呈现任何特殊效果.不过,它为鼠标用户改进了可用性.如果您在 label 元素内点击文本, ...
Xcode开发小问题集锦
Q:用Xcode 6 创建的工程在iOS 7的设备上运行时上下部均会出现黑色的区域且应用不能全屏运行. A:Targets -> General -> App Icons and Laun ...
FB
转眼间,开始工作到现在好几年,忙着功能,忙着补漏填坑,忙着项目,现在回顾着开始的理想,一时有点恍惚,然后鄙视了下自己居然还在“理想”中…… 那就开始吧,做点什么呢? DX9/DX11的支持是必须的,S ...
mvc 传递匿名对象
Controller代码: public ActionResult TupleTest() { LinqDBEntities db = new LinqDBEntities(); dynamic da ...
[转]XSS现代WAF规则探测及绕过技术
初始测试 1.使用无害的payload,类似<b>,<i>,<u>观察响应,判断应用程序是否被HTML编码,是否标签被过滤,是否过滤<>等等: 2.如果 ...
C语言程序设计第十一次作业
同学们,一晃一个学期就过去了,第一节课时,我曾做过一个调查,没有一个同学在中学阶段接触过程序设计,也就是说,那时,大家都是零基础,或许只是听说过"C语言"这个词,但其他便一无所知了 ...
[解决方案] pythonchallenge level 2
http://www.pythonchallenge.com/pc/def/ocr.html 根据页面提示查看网页源代码,在最后:<!--find rare characters in the ...
GUI
容器:1.JWindow 2.JFrame 3.JDialogo 4.JApplet 边界布局管理: 布局方式:把整个容器划分为五个部分:东西南北中,南北要贯通,中间最大(不仅是范围,权利也最大), ...
NSOperationQueue的基本使用
NSOperationQueue的作用 NSOperation可以调用start方法来执行任务,但默认是同步执行的如果将NSOperation添加到NSOperationQueue(操作队列)中,系 ...

window.onload用法详解:

window.onload用法详解:的更多相关文章

随机推荐

热门专题