3

I noticed that the <script src="..."></script> tag does not allow you to use JavaScript within it, such as:

<script src="myFile.js">
    alert( "This is a test" );
</script>

And this does not work, nor does it throw an error in FireBug, why is this happening, why do we have to add extra <script> tags to allow for JS to be used on the form itself?

Example

I have a file, found @ script/addScript.js from my root, and this contains:

function addScript( $src )
{
    var script = document.createElement( 'script' );
    script.type = "text/javascript";
    script.src = $src;
    document.getElementsByTagName( 'head' )[0].appendChild( script );
}

This is designed to allow me to add scripts to the DOM quickly and effectively, so I tried to do this:

<script src="script/addScript.js">
    addScript( "script/obj.js" );
    addScript( "script/home/login.js" );
</script>

But it did not work, so I have to do this instead:

<script>
    addScript( "script/obj.js" );
    addScript( "script/home/login.js" );
</script>
Improve this question

2 Answers 2

Reset to default
8

A script element loads a single script.

It can do that from either a URL or from inline, but it still loads one script; it can't use both types of source at the same time.

If you try to include both, the inline script will be ignored:

<script src="example.js">
    this_is_ignored();
</script>

… so you need multiple script elements.

<script src="example.js">
</script>
<script>
    this_is_NOT_ignored();
</script>

It is worth noting that the content of the script element will still exist in the DOM, so some people use it to store data in it which the JS referenced by the src will read. data-* attributes are (arguably) a cleaner approach to that though.

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

3 Comments

So in my example of addScript.js, it loads the script into the DOM and anything in the tags is overwritten with nothing to make room for the actual script to be loaded?
Plus script tag is syncronous, so even if you would be able to add and run in one tag, your fie wouldn't(?) be ready by the time you are calling a function inside of it. At least that's what i assume.
The text content is added to the DOM as normal text nodes, but it isn't treated as a script because the element has got its script from the URL.
1

Each <script> element contains one piece of executable javascript code. If you use a src attribute to load an external file, that is the piece of executable js for that element, otherwise it is the code placed between the <script></script> tags. If you try to do both, then you're attempting to associate two pieces of executable code to one script element and that is not the behavior of the script element so the browser's javascript engine ignores the inline code and executes the included file code.

As to why this is the case, it was likely a design choice by whoever established this standard. By creating a one-to-one relationship between code pieces and <javascript> elements there is no ambiguity about what code is being run or its priority.

Therefore in your case you will first have to load your external file...

<script src="script/addScript.js"></script>

and then call any functions provided by it.

<script> addScript( "script/obj.js" ); addScript( "script/home/login.js" ); </script>

For reference, this is generally how all javascript libraries are loaded within a webpage.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.