Loading/unloading external JS dynamically

user3026192

In the process of trying to mimic sites like Youtube, and loading only the specific fragments of a page on link click, I have tried making a function that loads/unloads the specific JS files and CSS files needed for the current page.

I've noticed that when CSS files get removed from the DOM, the styling from that file is no longer vaild, and only gets valid again if I add the specific link tag again. However, it seems like JS files get stored in the memory when loaded, and simply removing the reference in the DOM doesn't prevent the functions associated with that file to still work. How does Youtube go around this problem, or do you have your own suggestions on which path I should go to achieve unloading/loading JS files "completely"?

One idea I had was to just have all variables, element IDs etc in my code (both when it comes to HTML and JS) to be unique, and have an array that keeps check of which JS files have been loaded - so that there won't be more than one of each JS file in memory. But I guess that's not a safe solution, since the GC can remove a JS file from memory if that "page" hasn't been used for long?

taxicala

you can set to null a variable and then the garbage collector will clean it from the memory, with this, you could load your javascript dynamically into a variable so that later you will be able to set it to null. your files could have an object or be a constructor function.

this is just a basic explanation, however, my suggestion is that you check out angularjs, reactjs and many other frameworks that suit good for developing single page applications.

if you have something already developed, requierejs is a library for dinamically load dependencies and the implementation is really straightforward and easy.

caching is another story, you can avoid/refresh cache by the way you load your files. you can add a query parameter to the url with e.g a timestamp. that way the url of the file will be different each time, and the browser will not load it from the cache. You can also use headers in order to tell the browser when the file should be refreshed from the cache, or even prevent it from caching it at all.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Parse information from external dynamically loaded js file

From Dev

Dynamically styling external library

From Dev

Javascript: Dynamically generated functions, referring to an external included JS File with GPT rendering

From Dev

Dynamically created external events not draggable

From Java

How to load external scripts dynamically in Angular?

From Dev

Is it possible to Dynamically Create External tables in PLSQL/Oracle

From Dev

Dynamically change script from external input

From Dev

Dynamically executing and terminating external programs with C++

From Dev

Change value of Dynamically created td on external event

From Dev

Is it possible to Dynamically Create External tables in PLSQL/Oracle

From Dev

How Can i Load External page dynamically

From Dev

Dynamically add External (Cross-Workbook) references

From Dev

Is there a way to create Columnfamily in external table dynamically?

From Dev

Fancybox not working on dynamically added external links

From Dev

External CSS in Node JS

From Dev

onclick and external js file

From Dev

adding external js in gwt

From Dev

Angular JS and external libraries

From Dev

External js in an EJS template

From Dev

External JS not linking to HTML

From Dev

adding external js in gwt

From Dev

Function from external js

From Dev

External js in an EJS template

From Dev

External JS Doc Not Working

From Dev

not loading external js script

From Dev

Sailsjs - Dynamically load js

From Dev

Creating functions dynamically in JS

From Dev

JS dynamically get IDs

From Dev

Dynamically creating and loading JS