3

I have an asp.net page that loads some JavaScript scripts. One of those scripts loads some controls into the page appending them to the body in the window.onload event.

I need to inject a script via code behind to call a method of the scripts that depends on the controls created in the window.onload. This doesn't work because every call I make it's always to early and the controls are not created at the moment. If I call it by, for instance, onclick in an hyperlink it works because the controls were already created in the onload.

So:

  1. <script type="text/javascript" src="/Scripts/somefile.js"></script>

  2. addEvent(window, "load", blabla); - the js above prepares some controls to be appended to the body on the onload event

  3. In the code behind I try to write a script to the page by this.Page.ClientScript.RegisterStartupScript or this.Page.ClientScript.RegisterClientScriptBlock or whatever way that should call a method on the .js above, which depends on the control loaded on the onload event. This step fails because the control is not in the DOM yet.

Any suggestion on how make the call after the window.onload event?

7 Answers 7

3

create an array of functions:

<script>
  var onLoadFunctions = [];

  function addOnLoad(funcName) {
    onLoadFunctions[onLoadFunctions.length] = funcName;
  }

  function executeOnLoad() {
    for (var i=0; i<onLoadFunctions.length; i++) onLoadFunctions[i]();
  }

  addOnLoad(foobar);
  addOnLoad(blabla);
  addOnLoad(theother);

  window.onload = executeOnLoad;
</script>
1

You can register the js file like you register the startup script:

this.Page.ClientScript.RegisterClientScriptInclude("scriptKey", "/Scripts/somefile.js");
1

Instead window.onload, you can use document.onreadystatechange event for this,, below the sample snippet..

document.onreadystatechange=onReady;
  function onReady() {
      if (document.readyState=="complete") {
         alert('The document ready state is "complete"') 
      }
3
  • Note that onreadystatechange is a Microsoft-extension. It's not supported by Mozilla (the engine behind Firefox). developer.mozilla.org/en/DOM/document.onreadystatechange Oct 20, 2009 at 10:57
  • @jan, yes its right... OP mentioed ASP.net.. so i just though IE is relevent.. :)
    – RameshVel
    Oct 20, 2009 at 11:06
  • 1
    All of the readyState change events occur BEFORE onLOad. So this doesn't work at all.
    – Inigo
    Dec 29, 2022 at 22:49
1

option 1: Use timeout within onLoad to schedule your script to run later.

function mustRunLast () {
    // your "must run after everything else" code here
}

document.addEventListener('load', function(){
    // adjust the delay as you like, 500 millis is a bit long
    setTimeout(mustRunLast, 500)
})

The above forces you to guess how long it will take for your other onLoad scripts to finish. To play it safe, you'd have to use a long delay, but that is probably undesirable. But if you have some state that you can check to verify that the other scripts you're depending on have run, you can use a short delay and have the script keep retrying until things are ready:

option 2: Have your script check if things are ready, and schedule a retry for later if not

const mustRunLast = function() {
    // check some state to see if the other scripts
    // did their thing. If not, schedule self to retry later
    if (<not ready yet>) {
        setTimeout(mustRunLast, 50)
        return
    }
     
    // your "must run after everything else" code here
}

document.addEventListener('load', mustRunLast)
0

If you can use jQuery

then you can call the script after the DOM load is complete.

$(document).ready()

Introducing $(document).ready()

1
  • No, I can't. I mean, I could but for some reasons not interesting to this space, I need to stick to plain javascript, no libraries. But tks for the suggestion.
    – Dante
    Oct 20, 2009 at 10:03
0

Using Prototype JavaScript, you can have scripts called when the DOM is ready (see the API here):

document.observe("dom:loaded", function() {
  alert('The DOM is ready.');
});

I would recommend moving the script that loads in the onload event to the dom:loaded event.

1
  • OP is specifically asking that the script run AFTER onload scripts are done. Sure moving them earlier might work, but that might break other things.
    – Inigo
    Dec 29, 2022 at 22:50
-1

I tried several approaches with no success. I just changed the business requirement and the script is fired by an user action, as opposed to a script injected via code behind.

But for someone looking for an answer, there are several possible candidates that may solve the problem in your case.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.