How to add and remove js files dynamically

Question

I have a web page index.php, I want to add and remove JS files to this page dynamically

So far I did,

<script type="text/javascript" src="" id="dynamic_files"></script>

I had planned to change the src of this script tag by

function loadJsfiles( filename ){ 
    var filePath = 'include/js/'+filename;
    $("script#dynamic_files").attr('src',filePath);
};

and the included js file has script tags in it:

document.write('<script type="text/javascript" src="include/js/profile1.js"></script>');
document.write('<script type="text/javascript" src="include/js/profile2.js"></script>');
document.write('<script type="text/javascript" src="include/js/profile3.js"></script>');
document.write('<script type="text/javascript" src="include/js/profile4.js"></script>'); –

My question is that,

will that script tag printed in to my document page, if so how do I remove it

Reference: Dynamic js files

*and the included js file has script tags in it,* Well, it shouldn't have ` — Jared Farrish, Jun 09 '12 at 04:57
@Jared Farrish my planning is to add js files for some events, ie: profile view, edit view, etc and the js files will have to print perticular files in to my webpage — user1400191, Jun 09 '12 at 05:01
@JaredFarrish like document.write(''); document.write(''); document.write(''); document.write(''); — user1400191, Jun 09 '12 at 05:15
You CANNOT do document.write after load Look here: http://stackoverflow.com/questions/6530199/javascript-run-document-write-in-createelement-script-failed — mplungjan, Jun 09 '12 at 05:21
Ok, what you're doing with that code is considered obsolete, and that JavascriptKit site is filled with a lot of approaches and code techniques that should, these days, be avoided. For instance, `document.write()` is hardly *ever* (if ever) used in modern Javascripting, due to it's serious limitations. You seem to indicate you're using jQuery; I would encourage you to look into MooTools, maybe, or Backbone.js as platforms to build your system on. But for your own sake, don't follow through with what you're describing. — Jared Farrish, Jun 09 '12 at 05:23
Jared, the code in the link seems ok. It is using DOM and document.createElement. It does not contain document.write, but the OP's code does — mplungjan, Jun 09 '12 at 05:34
@mplungjan - When I first got started with JS, back in 2002, JavascriptKit was around and it wasn't all that great. In the intervening years, I can't say my impression has improved. Some sites, like QuirksMode, continue to be purveyors of quality, I just have never included that site in that tier, and I would almost guarantee they've got a lot of legacy code hanging around. There's better outlets to learn, like MDN and Javascript Garden. Just my opinion. — Jared Farrish, Jun 09 '12 at 05:38
I agree, in this case, however, they were not suggesting document.write but the correct document.createElement and the page in question does not seem obsolete. I have a stronger opinion about w3schools by the way :) — mplungjan, Jun 09 '12 at 05:57

score 1 · Accepted Answer · edited May 23 '17 at 12:30

1

You CANNOT do document.write after load

Look here:

Javascript: Run "document.write" in createElement script failed

You will notice your page will be wiped.

It does not matter which method you use to insert scripts, you need to either stop them from using document.write OR replace the document.write with a custom method.

Perhaps you want to use something like require.js - which is a javascript loader (thanks Jared for a better link than https://developers.google.com/loader/ )

edited May 23 '17 at 12:30

Community

1
1

answered Jun 09 '12 at 05:22

mplungjan

169,008
28
173
236

1

There's also [Require.JS](http://requirejs.org/), which [works with jQuery](http://requirejs.org/docs/jquery.html). – Jared Farrish Jun 09 '12 at 05:25
[jQuery EasyUI](http://www.jeasyui.com/demo/index.php) might pair well with Require.JS and provide a more advanced system to work within than what's being proposed. It appears to be simpler to use than ExtJS, but pretty powerful. – Jared Farrish Jun 09 '12 at 05:43
@JaredFarrish mplungjan i'm using bennadal's corMVC as my platform, what's your opinion about that?? – user1400191 Jun 09 '12 at 05:46
@user1400191 - It's site looks a little sparse (is it new?). I don't know anything about it. I like [Backbone.js](http://backbonejs.org/) as a JS MVC system. [Knockout](http://knockoutjs.com/) is another very interesting entry, an MVVC. – Jared Farrish Jun 09 '12 at 05:49
@user1400191 - Here's an overview of [Asynchronous Module Definition (AMD) with Knockout and RequireJS](http://knockoutjs.com/documentation/amd-loading.html). Interesting article. – Jared Farrish Jun 09 '12 at 05:55

score 0 · Answer 2 · edited Jun 09 '12 at 05:31

0

The better example is google analytics

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

edited Jun 09 '12 at 05:31

mplungjan

169,008
28
173
236

answered Jun 09 '12 at 05:26

Alejo JM

921
7
12

that link does the same as the code in the site posted by the OP. It is the document.write in the OPs OTHER js file that is the problem – mplungjan Jun 09 '12 at 05:36
@Alejo JM Thanks for your effort – user1400191 Jun 09 '12 at 05:50

score 0 · Answer 3 · edited Jul 29 '15 at 08:44

This is what I do:

var dynScript,dynParent;

function createjsfile(filename) {
    var fileref = document.createElement('script');
    fileref.setAttribute("type", "text/javascript");
    fileref.setAttribute("src", filename + "?noxhr="+(new Date()).getTime());
    return fileref;
}

function loadjsfile(filename){
    dynScript = createjsfile(filename);
    dynParent = document.getElementsByTagName("head")[0];
    dynParent.appendChild(dynScript);
}

function replacejsfile(filename) {
    var newelement = createjsfile(filename);
    dynParent.replaceChild(newelement, dynScript);
    dynScript = newelement;
}

On body.load event I do loadjsfile("script.js")

and when I want to reload it replacejsfile("script.js")

How to add and remove js files dynamically

3 Answers3

Linked