Basically, I want to make some changes to how my page looks, but only if javascript is enabled. So I wrote a javascript function that makes the changes, and then did this:
<body onload=“javascript:SetupFunction();”>
That seems to work fine in an ordinary HTML page. But when I try to do the same thing in an ASP.Net page, what happens is first I see the page without the changes, and then a moment later the changes are made.
For reasons I don’t understand, the problem only seems to occur when my page contains an image web control (even if I don’t specify an image source). Normal img tags don’t cause it. So for instance, if I take the HTML produced by my ASP.Net code and post it into another page, it loads looking like I want (because the image web control has already been rendered into an img tag).
Is there a way I can make the page not display until the script has run? Bonus points if you can explain to me why the image control made a difference.
Are you adding the body onload via codebehind, or is it directly in the aspx page code?
If you’re not doing it in codebehind, try it. Add it to either page_init or page_load event.
Make sure your body tag has an ID and runat=server. Then in the cs:
HtmlGenericControl myBody = (HtmlGenericControl)Page.Controls[0].FindControl(“myMasterBodyID”);
myBody.Attributes.Add(“onload”, “SetupFunction();”);
Thanks for the reply, ZipperJJ. I tried your suggestion, but unfortunately the problem is still the same.
Here’s a very simplified version of my code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
#yesJavaScript{
display: none;
}
#noJavaScript{
display: inline;
}
</style>
<script type="text/javascript">
<!-- Beginning of JavaScript -
function SetupFunction(){
var yesJS = document.getElementById("yesJavaScript");
var noJS = document.getElementById("noJavaScript");
yesJS.style.display = "inline";
noJS.style.display = "none";
}
// - End of JavaScript - -->
</script>
</head>
<body onload="javascript:SetupFunction();">
<p id="yesJavaScript">JavaScript Enabled</p>
<p id="noJavaScript">JavaScript Disabled</p>
<asp:Image runat="server"/>
</body>
</html>
The page is supposed to just say “JavaScript Enabled” if JavaScript is in fact enabled. Instead it first says “JavaScript Disabled”, and then a moment later it changes to “JavaScript Enabled”. (The problem goes away if I remove the image control, or even just remove the runat=“server” attribute of the image control.)
I figured out an alternative way to do what I want. I can write my stylesheet for the version that has JavaScript enabled, and then add a second stylesheet inside <noscript> tags, which then overwrites some of the attributes I set in the first stylesheet (but only in the case where JavaScript is disabled).
That seems sufficient to accomplish what I’m trying to do. Still, it would be nice if I understood better why the way I tried to do it didn’t work right, and if there’s a way to get the JavaScript to run as I intended. So I’d still be interested in hearing any further answers you all may have.
I have written many asp.net apps but have never needed to use the word javascript: in the onload clause. In fact I’ve never even seen it done that way before (I have only ever used asp.net for web sites). So I’m guessing that it might be causing a problem in asp.net.
Thanks for the suggestion. I tried it, but it seems to run the same either way. I’m honestly not sure what the point of typing “javascript:” is, I just picked it up because some online tutorials I read were doing it.
Regarding my original question, like I said in post #4 I figured out an alternative way to achieve the same result without using an onload script. So it’s mostly academic at this point.
All the same, I’m still curious about this weird delay in my onload script (again only when I include the asp:Image control) and if there’s a way around it. Any other ideas?
Whether your onload script gets on the page via the aspx page or the codebehind is immaterial. The html stream to the browser is the same. And that is the only thing which can affect the rendering. So IMO some advice above was a red herring.
…
The browser fires the onload event at the END of rendering the page. If you have an img tag, that will be after the image finishes downloading. Meanwhile, a lot of the rest of the page will already render, including your display paragraphs with thier (possibly inappropriate) inline styles.
One way to fix this is to simply place your call to your setup function inline in the html immediately below the last DOM object it affects. e.g.
That way the script will execute as soon as it arrives in the html stream from the server. That will be much sooner and the wrong message will never be visible. (and yes, you’d need to wrap that inline script call in html comments to avoid rendering the script in a no-script browser, but I wanted to keep the example clean.
Thanks, LSLGuy. That change makes it work the way I wanted.
One thing I don’t understand:
If I leave the code as I originally had it, but change asp:image to img, I immediately see the correct text. I only see the incorrect text when I have an asp:image web control.
But why should there be any difference? Isn’t the asp:image web control rendered to an image tag before the page is sent to the browser? I mean, from my browser’s perspective there should be no difference, right?
