Is There Any Way To Include a Javascript File Inside Another JS File?

Question

I have tried 3 suggestions found in other questions on the site but none seem to work for me and I'm not sure why.

// #1
var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.getElementsByTagName('head')[0].appendChild(imported);


// #2
// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
});


// #3
document.write( '<script language="javascript" src="myotherscript.js" />' );

The file I am trying to include is basically a massive file with variables declared like so:

var agent = [
"csv",
"drawfile",
"excel",
"flash",
"hangul",
"html",
"image",
"msword",
"ooxml",
"pdf",
"ppt",
"txt",
"wmf"];

Any ideas on what could be causing the problem?

UPDATE

Just an update to say that the JS file that I'm trying to include is generated dynamically from a database, so avoid regular expressions to add and remove the same bit of code constantly I have it stored in a serparate file.

The variables concerend are used to populate a dynamic drop down list with the values, so by not working I mean no values in the dropdowns :(

Read the Wikipedia Article on JSONP - en.wikipedia.org/wiki/JSONP . The technique of "script element injection" used in JSONP should address your needs. But if the script that you are including is not dynamically generated, then there is no need to include it dynamically. Why wouldn't you simply use a static <script> tag, like any other script module? — Cheeso
– Cheeso, Commented Apr 18, 2011 at 14:50
I've done this with jQuery once through an ajax request and just using the .html() tag to write it, though i did not load the js file like that, i used <script> js/jQuery code here </script>. — Kristoffer la Cour
– Kristoffer la Cour, Commented Apr 18, 2011 at 14:52
Your problem could be scope, I am not sure how jQuery executes scripts loaded with getScript, but probably the results are not in global scope, since you are using var. The real question is, if your file is just a bunch of data, why don't you just use JSON to store it, and then parse the json in your main code? No need to dynamically load & run javascript to initialize some variables. — Jamie Treworgy
– Jamie Treworgy, Commented Apr 18, 2011 at 14:52
For reference, <script ... /> won't work in browsers that don't support XHTML (like IE), and if you're using a non-XHTML doctype it won't work anyway. (HTML, even HTML5, sees it as an opening tag with no closing tag.) — cHao
– cHao, Commented Apr 18, 2011 at 14:52

mcgrailm · Accepted Answer · 2011-04-18 15:13:42Z

2

I would use require plugin for now I think jquery will have this in the next core release 1.6

answered Apr 18, 2011 at 15:13

mcgrailm

17.7k22 gold badges85 silver badges131 bronze badges

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

Comments

65Fbef05 · Accepted Answer · 2011-04-18 15:36:00Z

2

If the sole purpose is to include another javascript file to declare a bunch of variables and their values into the global scope, why not just <script type="text/javascript" src="myotherscript.js"></script> in the head of your html document before your other script source includes?

Edit:

The problem is that you cannot define global variables from within a method. You do have the plausible option of encapsulating your whole script file (or at least the affected portions) in a jQuery ajax function which evaluates your included file first thing. That would leave your included variables in the correct scope. Here is what I mean...

$.ajax({
   url: 'path/to/included/file',
   success: function(msg) {
      eval(msg); // This is where your included variables are in regard to scope

      // This is where you would paste all of your dependent functions and whatnot

      }
    });

// Outside of the ajax method, you won't be able to use your included properties

edited Apr 18, 2011 at 15:36

answered Apr 18, 2011 at 14:53

65Fbef05

4,5221 gold badge24 silver badges24 bronze badges

3 Comments

cHao Over a year ago

Because it adds the requirement that someone remember to load that other file. In a perfect world, you'd only need to load the stuff you're actually using and let it load whatever it requires.

65Fbef05 Over a year ago

I wouldn't personally leave that up to my browser script, though. To me, that seems like it would be more of a server-side functionality (determining what files belong where).

cHao Over a year ago

It could be done server-side, if you have a framework that manages scripts for you. Not everyone does, though.

ChrisThompson · Accepted Answer · 2011-04-18 14:55:27Z

1

var getScript = function(jsPath) {
    $.ajax({
        dataType:'script',
        async:false,
        cache:true,
        url:jsPath
    });
};

answered Apr 18, 2011 at 14:55

ChrisThompson

2,00813 silver badges17 bronze badges

Comments

Mike Robinson · Accepted Answer · 2011-04-18 15:18:21Z

1

http://requirejs.org/ is the most popular for this kind of problem

answered Apr 18, 2011 at 15:18

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

Comments

martincarlin87 · Accepted Answer · 2011-04-19 09:09:24Z

0

Thank you everyone for your help but I think the cause of the errors was some characters that needed escaping within the variables.

Martin

answered Apr 19, 2011 at 9:09

martincarlin87

11.1k24 gold badges104 silver badges148 bronze badges

Collectives™ on Stack Overflow

Is There Any Way To Include a Javascript File Inside Another JS File?

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related