loading (requesting) javascript in a specific order

Question

Good afternoon everyone, I have a unique situation where I am trying to load javascript in a specific order. It appears that browsers request javascript from the server by multiple files at one time. My issue is, I need one to load, which sets a cookie, then I need the second one. This is to check and see if 3rd party cookies are enabled. And depending on whether they are or not, it will hide or display DOM elements, specifically hide the iFrame and display a window saying they need to enable 3rd party cookies, or have a link they can click on.

I have a .net MVC app, that has a controller and 2 actions. Action 1 is called setcookie, returns nothing but sets a cookie.

The second action is called ValidateCookie, which checks to see if the cookie was sent or not and returns a simple Javascript function returning true or false. The problem though, sometimes browsers will call the ValidateCookie before the setcookie. I have verified this using fiddler. But it's not always, usually it is called in the correct order. Maybe 1 out of 10 is backwards.

I have tried putting the SetCookie in the head and validate at the end of the body. Set at the top of the body, validate at the end, both at the end, using a link tag to call setcookie, using an img tag, using a CSS @import. Setting defer=none. I just can't seem to get it to load the javascripts in the correct order. Because it's not in the correct order, it is very possible that the cookie result function would return false even though they do have them enabled.

I have found a few solutions that have the first javascript call a method that dynamically adds the second script tag to the html. All well in good, except I need these 2 javascripts loaded before everything continues. And dynamically added script tags load after all the other scripts are done.

Maybe it's just not possible as well because everything is all about loading multiple files at the same time now.

jfriend00 · Accepted Answer · 2013-03-04 23:05:49Z

2

The only way you can make a cookie from the first script get sent to the server when the second script is requeste is for you to manually load the second script after the first one has set the cookie. You cannot rely on <script> tags to do this for you because browsers are allowed to prefetch scripts even though they will be executed in <script> tag order.

So, the sequence of events would be this:

First script loads and executes.
Cookie is set.
Second script is dynamically added to the document.

You will also have to make sure that the second script isn't cached, probably by appending a unique argument onto the end of the URL (usually a date-time stamp).

You will also need to make sure that page and both scripts and cookie are all in common domain with proper settings on the cookie so that they can all access the cookie.

Here's an example (firstscript.js sets the cookie, it is sent to the server when secondscript.js is requested):

<script src="firstscript.js"></script>
<script>
(function() {
    var dynScript = document.createElement("script");
    var now = new Date().getTime();
    dynScript.src = "secondscript.js?ts=" + now; 
    document.getElementsByTagName("head")[0].appendChild(dynScript);
})();
</script>

edited Mar 4, 2013 at 23:05

answered Mar 4, 2013 at 22:59

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Edward Over a year ago

That's pretty much the conclusion I have come to. Which means re-thinking all of the scripts, and putting them in the onload, or using jquery or some other library. I was hoping to have a way around it.

jfriend00 Over a year ago

@Edward - it is trivial to load a script dynamically (like four lines of code). You don't need a library for that. You can know when the first script is done executing by just relying on sequential execution of scripts.

Edward Over a year ago

Thanks for the example. It's close to the way I was thinking it was going to end up being.

jfriend00 Over a year ago

@Edward - since you're fairly new to StackOverflow, do you understand the StackOverflow protocol about selecting the green checkmark to the left of the answer if there's an answer that satisfies your question?

Collectives™ on Stack Overflow

loading (requesting) javascript in a specific order

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related