How to remove and add js file completely dynamicaly after page load by jquery?

Question

In my project ,I have to load JS and CSS file dynamically after the page load. By using below code I am able to add and remove the js file But after adding the new file by removing the previous one,then the previous file is not shown in the header but when I run the code both js file code is executed.I don't known how to remove the file completely ,Can some body help me. For that the code is.

In the the view page header:-

<link rel="stylesheet" id="videoCss" />
<script id="videojs"></script>

Jquery for Dynamically load JS and CSS file:-

function addRemoveJsCssFile(filename, filetype)
    {
        var fileref='';
        if (filetype == "js") { //if filename is a external JavaScript file
            document.getElementById("videojs").remove();
            fileref=document.createElement('script');
            fileref.setAttribute("type", "text/javascript");
            fileref.setAttribute("src", filename);
            fileref.setAttribute("id", "videojs");
        }
        else if (filetype == "css") { //if filename is an external CSS file

            document.getElementById("videoCss").remove();
            fileref = document.createElement("link");
            fileref.setAttribute("rel", "stylesheet");
            fileref.setAttribute("type", "text/css");
            fileref.setAttribute("href", filename);
            fileref.setAttribute("id", "videoCss");
        }
        if (typeof fileref != "undefined")
            document.getElementsByTagName("head")[0].appendChild(fileref)
    }

In this function we have to pass the file location and type of file i.e css or js to add file dynamically.Thank you.

Answer 1

I don't know if I've understood your issue, but let me try to explain:

if the original script is in head section, it will be executed immediately, because Javascript is a procedural language, so there's nothing that you can do in a script placed "later": scripts defined earlier are executed earlier so, maybe your problem is when you call your function, it's simply too late to stop the videojs execution.

On the other side with scripts defined before, you can't see script tags defined later.. or better, you could if you're deferring, but in a deferred situation you'll be fighting again with the same issue, the videojs script would be always executed (it would be always too late or too early, because your statements executes or before, or after, there isn't a third way).

Of course you can load a script before just to set a global object that could say to videojs "stop, don't proceed with your stuff!" but obviously you shall edit videojs code either, with a wrapper "if" that asks that object the permission to proceed, and I don't think that's the response you're looking for.

But the question is: what's executed in that javascript videojs, an event binder that starts on load? Or in another event? Or is just a sequence of statements that are executed - sorry for the wordplay - sequentially?

In the first and second case there's something that you can do before: if video.js starts when an event is triggered, you can stop that function to be executed, operating before that trigger: you must delete the event subscription. To unbind the event, you must know how the first script operates and what event it subscribes in order to unbind it.

Here is how to execute script before jQuery ready event (but it's valid also for native javascript events, so I think that might be helpful):

running jQuery code before the dom is ready

This answer is useful even for every document events, not only for the load or "jQuery ready".

But, even if it's possible to remove the bind "vanishing" every videojs script effects, it's not a clean job, because

1. Overall, videojs has been executed
2. This will work only with videojs and at least it may work only with hardcoded scripts that uses the same event to start, but not for all hardcoded scripts

So, what I suggest for your purpose, it's to manage load and unload of scripts entirely with this manager, don't hardcode them in HTML.

PS: Have you ever heard about require.js?

If not, take a look here