All geek questions in one place

Make sure my .JS file is uploaded every time before others

I have a website where I do not have access to the source, but I can manipulate it using Javascript. I have a file called main.js that was included at the very end of the inclusions that I have access to, and I would like to run my Javascript code in this file. I have a .JS file with the helloWorld() function on my server that I would like to load before the $(document).ready() callback is called, because one of the functions is $(document).ready() on my site page / pages uses this feature.

Custom .JS file :

 function helloWorld() { alert("Hello World"); }

main.js file on server (available) :

 //All the JS code that the website uses .. // My custom javascript code that includes my custom .JS file $.getScript("helloWorld.js", function() { // Use anything defined in the loaded script... });

Now I would like helloWorld() load while the page is loading, and before any $(document).ready() functions are run. I understand that loading this .JS file during page loading can slow down page loading. Is there a bulletproof way to make sure my custom javascript function is loaded before any $(document).ready() ? If there is any other way I can achieve this, please let me know. Wait for your offers.

+6
source share
2 answers

Looks like I found a solution to the problem. I would not suggest it, but this is the only way to load an external script from another before the DOMContentLoaded event DOMContentLoaded .

Decision

Since your main.js script is located in the <head> your document, you can be sure that it will be loaded and executed before any next part of the DOM. Given this, you can use the synchronous XMLHttpRequest to load the script and execute it .

This technique has its pros and cons:

  • Pros: you can load and execute any script up to DOMContentLoaded , as well as several scripts in sequence.

  • Cons: Your document will be frozen until the requests are completed.

Not so bad if your script is not huge, it will not affect the load time. We can still do it.

Implementation

First of all, make sure your custom.js script is served by a link that will always be available so that your request will not fail. Also make sure your main.js script does not have async or defer , so it will always be executed in <head> before the DOMContentLoaded event.

 <!-- NOT GOOD --> <script src="main.js" defer></script> <script src="main.js" async></script> <!-- GOOD :) --> <script src="main.js"></script>

Now that you are ready, in the main.js script you need:

  • Create and initialize a synchronous XMLHttpRequest object and send() a GET request for your content.js script.

  • Create a <script> element and put in it the result of your request (which is stored in the .responseText property of the request object).

  • Add a script to <head> to run it before loading the DOM.

In addition, if you also want your script to be deleted immediately after execution (therefore, it will not be displayed to users), you can:

  1. Remove the <script> from the document after running its code. To do this, you need to listen to the onload .

In addition, if you want your code to run completely anonymously, you can wrap it inside an anonymous function to prevent access to it from the global scope.

Here is a brief example of what you need to do in your main.js file:

 (function() { // Create the request and the script var xhr = new XMLHttpRequest(), s = document.createElement('script'); // Send the request to retrieve custom.js xhr.open('GET', 'path/to/custom.js', false); xhr.send(); // Listen for onload, and remove the script after execution s.addEventListener("load", function(e) { s.parentElement.removeChild(s); }); // Load the code inside the script and run it in the head s.textContent = xhr.responseText; document.head.appendChild(s); })();

Now your custom.js script will (anonymously) work until DOMContentLoaded , completing the mission!

+6
source

As far as I can tell, there are several ways to do this, but the best way would be to use something like Require.js or CommonJS to resolve your dependencies, concatenate them and publish the resulting concatenated javascript file (or many if you can split your application into several sections).

A not-so-good method is to use the main script to load other scripts by adding script tags, so you can provide it there since it loads other scripts.

+1
source

Source: https://habr.com/ru/post/985501/

More articles:


All Articles