JavaScript之共享onload
我们知道,当我们将JS代码脚本放到<head></head>标签之间时,这是的js代码加载要先于DOM加载,而我们往往会在JS代码脚本中写一些获取DOM元素的代码,而此时的DOM是不完整的,
所以我们通常的解决方法是将函数放入到window.onload里面去,window.load事件是网页加载完毕时会触发的一个事件，如果将我们的函数与之绑定,我们的函数也会在页面加载完毕之后执行.
如下代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var aa = document.getElementById("target");
alert(aa.nodeName);
</script>
</head>
<body>
<div id="target"></div>
</body>
</html>
这段代码在浏览器执行时就会报错,aa is null;因为在js获取id=target的div时,该div还没有加载完毕。所以我们需要这样来解决这个问题，代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = bb;
function bb() {
var aa = document.getElementById("target");
alert(aa.nodeName);
}
</script>
</head>
<body>
<div id="target"></div>
</body>
</html>
这个时候代码正常输出:DIV; nodeName默认输出标签名的大写形式;
这似乎已经解决了我们的问题,但是不够perfect，如下代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = bb;
cc();
function bb() {
var aa = document.getElementById("target");
alert(aa.nodeName);
}
function cc() {
var dd = document.getElementById("Div1");
alert(dd);
}
</script>
</head>
<body>
<div id="target"></div>
<div id="Div1"></div>
</body>
</html>
这个时候任然会报错:dd id null;错误原因和上面一样；
解决办法有两个:
1、将需要绑定window.onload事件的两个函数写到一个匿名函数里面,在将该匿名函数与window.onload事件绑定,ok,问题解决！
但是这个方法只能解决需要绑定window.onload事件的函数较少的情况,一旦那些函数有很多,这个方法就不是很好！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
window.onload = ee;
function bb() {
var aa = document.getElementById("target");
alert(aa.nodeName);
}
function cc() {
var dd = document.getElementById("Div1");
alert(dd.firstChild.nodeValue);
}
function ee() {
bb();
cc();
}
</script>
</head>
<body>
<div id="target"></div>
<div id="Div1">asdas</div>
</body>
</html>
2、这是一个弹性最佳的解决方案 不管你打算在页面加载完毕是执行多少个函数,他都能应付自如；代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
addOnLoadEvent(aa);
addOnLoadEvent(bb);
function aa() {
var aa=document.getElementById("ab");
alert(aa.firstChild.nodeValue);
}
function bb() {
var bb = document.getElementById("abc");
alert(bb.firstChild.nodeValue);
}
//定义一个addOnLoadEvent的函数
function addOnLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func; //如果window.onload事件没有绑定任何function则正常绑定
}
else {
//如果window.onload事件已经绑定了函数,则在原来的基础上,继续添加新的函数
window.onload = function () {
oldonload();
func();
};
}
}
</script>
</head>
<body>
<div id="ab">1</div>
<div id="abc">2</div>
</body>
</html>
上面的addOnloadEvent()方法解决了我们的问题,但是还不够全面,因为当需要绑定的方法过多时,我们就要写多条addOnLoadEvent(方法)；所以为了减少代码量这里的代码还可以这样改，
代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var onloadlist = [aa,bb];//定义一个数组,数组里面都是需要在页面加载完毕之后才执行的函数引用
addOnLoadEvent(onloadlist);
function aa() {
alert(1);
}
function bb() {
alert(2);
}
function addOnLoadEvent(eventlist) {
//循环遍历数组依次加到队列中
window.onload = function () {
for (var i = 0; i < eventlist.length; i++) {
eventlist[i]();
}
}
}
</script>
</head>
<body>
<div id="ab">1</div>
<div id="abc">2</div>
</body>
</html>
这样就一定程度上减少了代码量，还便于管理方法的执行先后顺序。
JavaScript之共享onload的更多相关文章
- JavaScript 是如何工作的：JavaScript 的共享传递和按值传递
摘要: 原始数据类型和引用数据类型的副本作为参数传递给函数. 原文:JavaScript 是如何工作的:JavaScript 的共享传递和按值传递 作者:前端小智 Fundebug经授权转载,版权归原 ...
- 【Python全栈-JavaScript】JavaScript的window.onload()与jQuery 的ready()的区别
JavaScript的window.onload()与jQuery 的ready()的区别 做web开发时常用Jquery中$(document).ready()和JavaScript中的window ...
- 原生javascript 共享onload事件
在工作时,我们给一个元素绑定了事件,如果dom还没加载完成,就执行了js代码,就不会绑定成功.常规解决方案就是用: window.onload = EventFunction; 可是如果有两个 事件, ...
- javascript的window.onload()方法和jQuery的$(document).ready()的对比
jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...
- JavaScript：window.onload问题
前几天做一个点击按钮,就实现切换图片效果的小demo时,代码看上去没问题,就是达不到效果.让我百思不得其解. 代码如下: <!DOCTYPE html> <html> < ...
- JavaScript向window onload添加加载函数
有时候我们需要在页面加载事件后完成一些函数操作,对于函数比较多的情况下可以写一个统一的加载函数 .本函数来自于JavaScript DOM 编程艺术: function addLoadEvent(fu ...
- 共享onload事件
在做前端工作中,我们想要设置某个函数prepare,让它在网页加载完毕后执行,会触发一个onload事件,这个事件与windows对象相关联,必须把prepare函数绑定到这个时间上,语法如下:win ...
- javascript --- 将共享属性迁移到原型中去
当我们用一个构造函数创建对象时,其属性就会被添加到this中去.并且被添加到this中的属性实际上不会随着实体发生改变,这时,我们这种做法显得会很没有效率.例如: function her(){ th ...
- js共享onload事件
问题:通过js进行事件绑定,必须在HTML文档加载完成后再执行js脚本,否则可能因DOM不完整导致无法完成预计的效果,但对于不同的需求如何选用最佳的实现方式呢,这里做了整理,可以做参考. 一.对于小型 ...
随机推荐
- Floyd算法应用-医院选址问题
1)问题描述 n个村庄之间的交通图可以用有向网图来表示,图中边<vi, vj>上的权值表示从村庄i到村庄j的道路长度.现在要从这n个村庄中选择一个村庄新建一所医院,问这所医院应建在哪个村庄 ...
- 配置自己风格的Clang-Format-Xcode
在项目根目录下,创建一个文件.clang-format,使用vim打开并修改. 具体的配置风格可以看这里:http://clang.llvm.org/docs/ClangFormatStyleOpti ...
- 使用yii中CSecurityManager的一点小技巧
当我们使用CSecurityManager::encrypt对字符串进行加密, 加密后的字符串是一串乱码(看起来确实像乱码, 具体是什么有待考证), 这不利于我们的下一步操作. 我们可以使用base6 ...
- javaScript 工作必知(十) call apply bind
call 每个func 都会继承call apply等方法. function print(mesage) { console.log(mesage); return mesage; } print ...
- 深入理解CSS3 Animation 帧动画（转）
CSS3我在5年之前就有用了,包括公司项目都一直在很前沿的技术. 最近在写慕课网的七夕主题,用了大量的CSS3动画,但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的,这里就写下关于帧动 ...
- PO状态为“处理中”的处理方法
EBS中经常会出现PO提交审批后状态为“处理中”的情况,此时PO创建人无法打开,审批人也无法打开,工作流等查看也无异常,可以使用一下SQL处理再进行审批: --set serveroutput on ...
- Power Designer Repository 使用指南(一)
最近wait4friend在进行建模的时候,总是被问如果在Power Designer里面进行版本的控制.原始的方法是对PDM文件进行SVN管理,不过这个方法比较土,并且不方便版本直接图形的比较.其实 ...
- win32 控件的创建和消息响应
1. 控件的创建 控件的创建和窗口创建是一样的,例如: ,,,, hWnd,(HMENU)IDB_BUTTON01,hInst,NULL); 是一个按钮的创建,其中hWnd是窗口句柄,hInst是应用 ...
- gets()函数
基本信息: 可以无限读取,不会判断上限,以回车结束读取(这个换行符也被读取了),所以程序员应该确保buffer的空间足够大,以便在执行读操作时不发生溢出. 函数原型: char*gets(char*b ...
- OC语法4——自定义构造方法，description方法
自定义构造方法: 我们已经知道创建对象分两步,1:在内存中开辟存储空间,并把地址存储在指针变量里,2:调用指针变量的初始化方法init初始化该对象. Student * stu = [Student ...