Referencing one java script library from another

Question

I'm just getting started defining and implementing external javaScript libraries and I'm a little confused by the rules. Below is the contents of three files "top.js", "bottom.js", and "ref.html". The file "bottom.js" contains a reference to "top.js" and the file "ref.html" contains a reference to "bottom.js". In "ref.html" I have attempted to access functions in "top.js" by directly calling function and by calling the function via another function in "bottom.js", neither approach seems to be working. Any suggestions would be appreciated.

topTest.js:

function top_test() {
alert('Test from top');
}

bottom.js

function bottom() {
alert("bottom");
top_test();
}

loadScript('topTest.js');    // Call function (function declarations are evaluated
                     //   before the rest of the code, so this works)

function loadScript(file_name) {
var newScript = document.createElement('script');
var scripts = document.getElementsByTagName('script');

// Reference to the latest (this) <script> tag in the document
scripts = scripts[scripts.length-1];

// Set target
newScript.src = file_name;

// Clean-up code:
newScript.onload = newScript.onerror = function() {
    this.parentNode.removeChild(this);
};

// Insert script in the document, to load it.
scripts.parentNode.insertBefore(newScript, scripts);

}

ref.html

<html>
<head>
<script type="text/javascript" src="bottom.js"></script>
</head>
<body>
test
<script type="text/javascript">
bottom();
top();
</script>
</body>
</html>

Rob W · Accepted Answer · 2012-03-22 08:53:41Z

1

The <script> tags have to be removed from the .js files.

These tags are only needed inside a HTML document, used to mark a part of the content as a script. The whole content of a JavaScript file is JavaScript, so adding the <script> tags do not make any sense, and is therefore invalid.

To include a JavaScript from within a script in the <head>, you can use a library, or one the following method:

Create a <script> tag using document.createElement, and insert the script in the document. Example of your bottom.js:

function bottom() {
    alert("bottom");
    top();
}
loadScript('top.js');    // Call function (function declarations are evaluated
                         //   before the rest of the code, so this works)

function loadScript(file_name) {
    if (document.readyState === 'loading') { // Chrome
        document.write('<script src="' + file_name.replace(/"/g, '&quot;') + '"></script>');
        return;
    }
    var newScript = document.createElement('script');
    var scripts = document.getElementsByTagName('script');

    // Reference to the latest (this) <script> tag in the document
    scripts = scripts[scripts.length-1];

    // Set target
    newScript.src = file_name;

    // Clean-up code:
    newScript.onload = newScript.onerror = function() {
        this.parentNode.removeChild(this);
    };

    // Insert script in the document, to load it.
    scripts.parentNode.insertBefore(newScript, scripts);
}

edited Mar 22, 2012 at 8:53

answered Mar 21, 2012 at 20:49

Rob W

350k87 gold badges811 silver badges683 bronze badges

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

9 Comments

Matt Ball Over a year ago

This is part of the answer; you might also want to explain how to "include" a JS file in another JS file. *cough*

Ben Pearce Over a year ago

Thank you for your reply. I have removed the tags (edited in the code above) and it still doesn't seem to work.

Rob W Over a year ago

@user996035 See updated answer for the contents of bottom.js.

Ben Pearce Over a year ago

I have attempted to implement your suggestion (see code edits). The block marked "//Clean up code" seems to have a problem (I tried removing the semi-colon at the end of the function and that didn't fix it). With that line commented out the function in "top.js" is still not getting called. Any further help would be greatly appreciated.

Rob W Over a year ago

@user996035 I accidentally put a colon, :, instead of a semicolon, ;, at the end of the code. It works correctly now.

|

safarov · Accepted Answer · 2012-03-21 20:50:06Z

0

Dont use html tags in .js files. Just plain javascript codes

answered Mar 21, 2012 at 20:50

safarov

7,7942 gold badges38 silver badges52 bronze badges

2 Comments

Ben Pearce Over a year ago

Thank you for your reply. I have edited the code above to incorporate your suggestion and still doesn't seem to work.

safarov Over a year ago

You cannot use function in .js file that defined an other .js file. All must be used in html which both js must linked

Collectives™ on Stack Overflow

Referencing one java script library from another

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related