5

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.

Bibhudatta Sahoo
  • 4,179
  • 1
  • 22
  • 44
  • you can refer to this [link](http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml). May it helps! – RonyLoud Nov 08 '16 at 10:22
  • Considering targetting a `` – Crowes Nov 09 '16 at 08:14
  • Yah Josh that's my problem.I want to remove previous JS file add add new one.Do you have any method for that. – Bibhudatta Sahoo Nov 10 '16 at 05:25

4 Answers4

2

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

Community
  • 1
  • 1
Sycraw
  • 498
  • 3
  • 15
  • I wish I had seen this post about 2 days ago, before I wasted most of the last two days figuring out how the Video.JS library and its plugins behave when included in the head tag. This is one of many reasons that I have never been a fan of JavaScript. – David A. Gray Feb 13 '21 at 20:38
1

Instead of deleting whole element, and than creating new one, maybe try just to change the 'src' attribute in existing element?

now

document.getElementById("videojs").remove();
fileref=document.createElement('script');
fileref.setAttribute("type", "text/javascript");
fileref.setAttribute("src", filename);
fileref.setAttribute("id", "videojs");

suggest

document.getElementById("videojs").setAttribute("src", filename);
linearSpin
  • 93
  • 1
  • 8
1

You can use $.getScript() to dynamically load js file.

Sahil
  • 57
  • 2
1

Try this

$('#scriptid').remove(); //remove it first and then add the new one

var script = document.createElement('script');
script.src = something;

document.head.appendChild(script); //Add element to head tag

OR

$("<style type='text/css' href=''></style>").appendTo("head");
$("<script type='text/javascript' src=''></script>").appendTo("head");
Marios Nikolaou
  • 1,248
  • 1
  • 12
  • 22