admin管理员组文章数量:1186151
I have two blocks of JavaScript which both call functions via winodow.onload
. One of the functions is called on every page, but the other is only called on one specific page. On that page one function works, but the other does not, and I am not getting any errors that I can see.
Does it matter that both functions are called via window.onload
in different script blocks (see example)? Shouldn't this work?
<!--some html-->
<script language="JavaScript" type="text/javascript">
function firstFunction(){
//do stuff
}
window.onload = firstFunction;
</script>
<!--some html-->
<script language="JavaScript" type="text/javascript">
function secondFunction(){
//do stuff
}
window.onload = secondFunction;
</script>
<!--some html-->
UPDATE:
I ended up taking zzzzBov's suggestion of using jQuery's $(document).ready(doAction);
function. Now I have multiple.js
included on a single page all using this call and there is no conflict.
I have two blocks of JavaScript which both call functions via winodow.onload
. One of the functions is called on every page, but the other is only called on one specific page. On that page one function works, but the other does not, and I am not getting any errors that I can see.
Does it matter that both functions are called via window.onload
in different script blocks (see example)? Shouldn't this work?
<!--some html-->
<script language="JavaScript" type="text/javascript">
function firstFunction(){
//do stuff
}
window.onload = firstFunction;
</script>
<!--some html-->
<script language="JavaScript" type="text/javascript">
function secondFunction(){
//do stuff
}
window.onload = secondFunction;
</script>
<!--some html-->
UPDATE:
I ended up taking zzzzBov's suggestion of using jQuery's $(document).ready(doAction);
function. Now I have multiple.js
included on a single page all using this call and there is no conflict.
5 Answers
Reset to default 15The recommended best practice for registering event handlers is to use "addEventListener" (see https://developer.mozilla.org/en/DOM/element.addEventListener). Using this method ensures that the handler is additive and does not replace existing handlers.
function something() {alert("1");}
function somethingElse() {alert("2");}
window.addEventListener("load", something, false);
window.addEventListener("load", somethingElse, false);
The second onload
assignment is erasing the first. So if you have two window.onload
assignments on the same page pointing to two different handlers the second will win. You will need to merge them into a single one:
<script type="text/javascript">
function firstFunction(){
//do stuff
}
</script>
<!--some html-->
<script type="text/javascript">
function secondFunction(){
//do stuff
}
</script>
<script type="text/javascript">
window.onload = function() {
firstFunction();
secondFunction();
};
</script>
As @Darin said, the second assignment is overwriting the first value assigned to onload
. Check out Simon Willison's general purpose approach to creating multiple onload
events:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
Used like this:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});
I'll let him explain it:
The way this works is relatively simple: if window.onload has not already been assigned a function, the function passed to addLoadEvent is simply assigned to window.onload. If window.onload has already been set, a brand new function is created which first calls the original onload handler, then calls the new handler afterwards.
Closures are pretty cool.
Simple. Try this
window.addEventListener("load", function(evt) {
alert("hello 1");
});
window.addEventListener("load", function(evt) {
alert("hello 2");
});
window.addEventListener("load", function(evt) {
alert("hello 3");
});
}
I ended up taking zzzzBov's suggestion of using jQuery's $(document).ready(doAction); function. Now I have multiple.js included on a single page all using this call and there is no conflict.
本文标签: javascriptShould making two calls to windowonload be validStack Overflow
版权声明:本文标题:javascript - Should making two calls to window.onload be valid? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1738350458a2078873.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
.cfm
files, each of which represents a certain section of the page. If I want something to appear in the section wherecomponent1.cfm
is located, I must put my code there. Originally I divided up my scripts in the.cfm
files they related to, but now I have enough scripts that it might be easier to lump them all into one.js
file and sort it out there. – ubiquibacon Commented Mar 15, 2011 at 3:40jQuery(function($){...your code here...});
, you can call that as many times as you need and all will work. – zzzzBov Commented Mar 15, 2011 at 4:35