CODEWITHSUNDEEP
javascript
Edward
Edward

Reputation: 1507

loading (requesting) javascript in a specific order

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.

Upvotes: 1

Views: 115

Answers (1)

jfriend00
jfriend00

Reputation: 707158

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:

  1. First script loads and executes.
  2. Cookie is set.
  3. 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>

Upvotes: 2

Related Questions