...

View Full Version : Resolved Problem with window.onload Function Finding Elements by Id



Rowsdower!
05-11-2009, 04:30 PM
I'm trying to use unobtrusive javascript for a page I am building. I want to insert a "bookmark me" item into the page. This is the script I am using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<script type="text/javascript">
<!--
function add_favorite() {
document.getElementById('bookmark').innerHTML="<a href=\"#\" rel=\"sidebar\" onclick=\"if(navigator.appName=='Microsoft Internet Explorer'){ window.external.AddFavorite(location.href, document.title); return false; }else{ this.title = document.title; }\" onMouseover=\"window.status='Bookmark Us';return true\" onMouseout=\"window.status=\";return true\" title=\"Bookmark This Page\"><img src=\"/images/bookmark65-3.png\" alt=\"Bookmark This Page\" /></a>";
}
window.onload=add_favorite();
-->
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Heading goes here...</h1>
<div id="bookmark">
</div>
</div>
<div id="main">
<h2>Content goes here...</h2>
</div>
<div id="footer">
Footer goes here...
</div>
</div>
</body>
</html>

It's pretty simple stuff that just populates an empty div with an image link to bookmark the page when users have javascript enabled.

Now when I call the function using <body onload="add_favorite();"> and cancel out the window.onload=add_favorite(); from the script it works just fine (it throws a line-1 syntax error up in IE that I can't figure out, but functionally everything still works in IE7 and FF2). When I try to do it the "unobtrusive" way I get nothing at all in either browser.

A little debugging revealed that the function is indeed being called and is running successfully, however the function is somehow unable to locate the element with ID of "bookmark" when it is fired with window.onload and as a result I get no bookmarking link. It's almost like window.onload is triggering itself too soon, before the div of "bookmark" is in the page, but how can that be?

Does anyone see something that I am screwing up here?

vwphillips
05-11-2009, 04:50 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<script type="text/javascript">
<!--
function add_favorite() {
document.getElementById('bookmark').innerHTML='<a href="#" rel=sidebar onclick="if(navigator.appName==\'Microsoft Internet Explorer\'){ window.external.AddFavorite(location.href, document.title); return false; }else{ this.title = document.title; }" onMouseover="window.status=\'Bookmark Us\';return true" onMouseout="window.status=\'\';return true" title="Bookmark This Page\"><img src="/images/bookmark65-3.png" alt="Bookmark This Page" /></a>';
}
//window.onload=function(){add_favorite(); }
-->
</script>
</head>
<body onload="add_favorite();" >
<div id="wrapper">
<div id="header">
<h1>Heading goes here...</h1>
<div id="bookmark">22
</div>
</div>
<div id="main">
<h2>Content goes here...</h2>
</div>
<div id="footer">
Footer goes here...
</div>
</div>
</body>
</html>

Rowsdower!
05-11-2009, 07:53 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/base.css" />
<script type="text/javascript">
<!--
function add_favorite() {
document.getElementById('bookmark').innerHTML='<a href="#" rel=sidebar onclick="if(navigator.appName==\'Microsoft Internet Explorer\'){ window.external.AddFavorite(location.href, document.title); return false; }else{ this.title = document.title; }" onMouseover="window.status=\'Bookmark Us\';return true" onMouseout="window.status=\'\';return true" title="Bookmark This Page\"><img src="/images/bookmark65-3.png" alt="Bookmark This Page" /></a>';
}
//window.onload=function(){add_favorite(); }
-->
</script>
</head>
<body onload="add_favorite();" >
<div id="wrapper">
<div id="header">
<h1>Heading goes here...</h1>
<div id="bookmark">22
</div>
</div>
<div id="main">
<h2>Content goes here...</h2>
</div>
<div id="footer">
Footer goes here...
</div>
</div>
</body>
</html>

Hi Vic, thanks for the effort but did you read my question? ;)

I am trying to implement this using "unobtrusive" javascript so that non-javascript users don't see any extra code (once I draw the script into an external file). This includes "onload" attributes. I found that this works now, though:
<script type="text/javascript">
<!--
window.onload = function() {
document.getElementById('bookmark').innerHTML="<a href=\"#\" rel=\"sidebar\" onclick=\"if(navigator.appName=='Microsoft Internet Explorer'){ window.external.AddFavorite(location.href, document.title); return false; }else{ this.title = document.title; }\" onMouseover=\"window.status='Bookmark Us';return true\" onMouseout=\"window.status=\";return true\" title=\"Bookmark This Page\"><img src=\"/images/bookmark65-3.png\" alt=\"Bookmark This Page\" /></a>";
}
-->
</script>

It seems like 6 of one, half a dozen of the other to me but for some reason this setup makes it run properly. The only thing left to tackle is the syntax error warning that IE7 is showing me, but that's a fight for another day.

I'm marking this puppy as resolved for now. Thanks anyway!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum