PDA

View Full Version : Resolved code without body onload



ggalan
12-08-2010, 03:48 AM
how would you write this without placing code in the body tag?



<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function findwidth(){
var width = document.getElementById('test').offsetWidth;
alert(width);
}
window.onload=findwidth();// doesnt work
</script>
</head>
<body>

<div style="width:965px">
<div style="width:100%" align="center">
<div style="width:365px" align="center">
<div id="test">

</div>
</div>
</div>
</div>
</body>
</html>

jscheuer1
12-08-2010, 07:04 AM
In the future please post a new question in a new thread like here where I've moved this. Do not interrupt an existing thread, especially not before the original person has had a chance to respond to the initial advice.

OK, the original solution - what I think you were asking about - was:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function findwidth(){
var width = document.getElementById('test').offsetWidth;
alert(width);
}
</script>
</head>
<body onload="findwidth();">
<div style="width:965px">
<div style="width:100%" align="center">
<div style="width:365px" align="center">
<div id="test">

</div>
</div>
</div>
</div>
</body>
</html>

Your code would work if written with the proper syntax. Instead of:



window.onload=findwidth();// doesnt work

use:


window.onload=findwidth;// does work

Or:


window.onload=function(){findwidth();};// does work

However, none of that is all that ideal. All three working approaches pollute the global scope unnecessarily, and all three take control of the onload event in such a way that is exclusive and subject to being overwritten by other scripts that might do the same thing.

To do this 'right' (there's no absolute right or wrong way), I might do:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
(function(){
function findwidth(){
var width = document.getElementById('test').offsetWidth;
alert(width);
}
if (window.addEventListener){
window.addEventListener('load', findwidth, false);
}
else if (window.attachEvent){
window.attachEvent('onload', findwidth);
}
})();
</script>
</head>
<body>
<div style="width:965px">
<div style="width:100%" align="center">
<div style="width:365px" align="center">
<div id="test">

</div>
</div>
</div>
</div>
</body>
</html>

Or:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="width:965px">
<div style="width:100%" align="center">
<div style="width:365px" align="center">
<div id="test">

</div>
</div>
</div>
</div>
<script type="text/javascript">
(function(){
var width = document.getElementById('test').offsetWidth;
alert(width);
})();
</script>
</body>
</html>

Neither of which require or are exposed to the onload event of the body or window, and neither of which have any variables or function names in the global scope. There are at least several variations on these two general approaches. Perhaps there's even another approach or approaches.

ggalan
12-08-2010, 04:35 PM
please excuse my hastiness, will make cleaner posts in the future
thank you much