How to include dynamic Javascript file in the DOM without repeating same file

Question

I want to load <div> content dynamically by using AJAX in a specific div. After the AJAX call I want to load a JS file in the footer. I loaded content by clicking menu without page loading by using URL hash. My problem is when I click the same link multiple times, the JS file is loading multiple times because the JS file is appended. That's why every event occurs multiple times. I want to load the JS file before checking if the file is already loaded into the DOM. If the file is not loaded in the DOM, I will append a JS file in the DOM.

As the answer suggested by this URL, here is my code:

var Utils = {
  loadjs: function(url){
    var footer = document.getElementsByTagName('body')[0];
    var script = document.createElement( 'script' );
    script.type = 'text/javascript';
    script.src = url;
    footer.appendChild(script);
  },
}
Utils.loadjs(url);

Asutosh · Answer 1 · 2020-08-15T18:11:51.917

2

You can read the script tags to search for a particular script is there or not. Something like below:

var Utils = {
  loadjs: function(url) {
    var me = document.querySelectorAll('script[src="' + url + '"]');
    if (me && me.length >= 1) {
      return null;
    }
    var footer = document.getElementsByTagName('body')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    footer.appendChild(script);
  },
}
Utils.loadjs(url);

edited Aug 15 '20 at 18:11

answered Aug 15 '20 at 17:57

Asutosh

1,775
2
15
22

I got error in me.length line. error: Uncaught TypeError: Cannot read property 'length' of null – Alien Aug 15 '20 at 18:01
I checked your code. but when I use console.log(me.length), it returned undefined – Alien Aug 15 '20 at 18:08
Can You try now. – Asutosh Aug 15 '20 at 18:12
Yes. I tried. the code gives output when I use if (me) return null – Alien Aug 15 '20 at 18:14
didnot get you, Does that answer your question? – Asutosh Aug 15 '20 at 18:16
In your answer I use if (me ) instead of if (me && me.length >= 1), then answer is working – Alien Aug 15 '20 at 18:20
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219879/discussion-between-asutosh-and-alien). – Asutosh Aug 15 '20 at 18:21

score 0 · Answer 2 · answered Aug 15 '20 at 17:55

You can use dynamic import() syntax to load modules, even from regular scripts.

This has the benefit of loading those scripts as modules, which are always in strict mode and have module scope.

How to include dynamic Javascript file in the DOM without repeating same file

2 Answers2