CODEWITHSUNDEEP
externaljavascript
Ben Pearce
Ben Pearce

Reputation: 7094

Referencing one java script library from another

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>

Upvotes: 1

Views: 5104

Answers (2)

Rob W
Rob W

Reputation: 348972

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);
}

Upvotes: 1

safarov
safarov

Reputation: 7804

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

Upvotes: 0

Related Questions