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 <script> tags in an included script file. Leave 'em out. — Jared Farrish
– Jared Farrish, Commented Jun 9, 2012 at 4: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
– user1400191, Commented Jun 9, 2012 at 5:01
Within your script.js files to be included, do you have <script> tags in them like markup? — Jared Farrish
– Jared Farrish, Commented Jun 9, 2012 at 5:09

Community · Accepted Answer · 2017-05-23 12:30:11Z

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, 2017 at 12:30

CommunityBot

11 silver badge

answered Jun 9, 2012 at 5:22

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jared Farrish Over a year ago

There's also Require.JS, which works with jQuery.

Jared Farrish Over a year ago

jQuery EasyUI 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.

user1400191 Over a year ago

@JaredFarrish mplungjan i'm using bennadal's corMVC as my platform, what's your opinion about that??

Jared Farrish Over a year ago

@user1400191 - It's site looks a little sparse (is it new?). I don't know anything about it. I like Backbone.js as a JS MVC system. Knockout is another very interesting entry, an MVVC.

Jared Farrish Over a year ago

@user1400191 - Here's an overview of Asynchronous Module Definition (AMD) with Knockout and RequireJS. Interesting article.

mplungjan · Accepted Answer · 2012-06-09 05:31:35Z

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 9, 2012 at 5:31

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jun 9, 2012 at 5:26

Lejo

1,0219 silver badges12 bronze badges

2 Comments

mplungjan Over a year ago

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

user1400191 Over a year ago

@Alejo JM Thanks for your effort

DBS · Accepted Answer · 2015-07-29 08:44:30Z

0

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")

edited Jul 29, 2015 at 8:44

DBS

10.1k4 gold badges40 silver badges61 bronze badges

answered Sep 27, 2013 at 23:15

bmatusiak

1511 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to add and remove js files dynamically

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related