Run JavaScript inside <script src="..."></script> Tags?

Question

I've a JavaScript file that processes tab switches. Here is the source:

var tCount = 0;

function SwitchToTab(id) {
    if (id < 0 || id > tCount) { id = 0; }

    for (var i = 0; i < tCount; i++) { document.getElementById("tab" + i).className = ""; }
    document.getElementById("tab" + id).className = "active";

    for (var i = 0; i < tCount; i++) { document.getElementById("area" + i).style.display = "none"; }
    document.getElementById("area" + id).style.display = "";
}

function InitializeTabs(initialTabId, tabsCount) {
    tCount = tabsCount;
    SwitchToTab(initialTabId);
}

I'm trying to make it as short as possible like this:

<script src="Resources/Tabs.js">InitializeTabs(0, 4);</script>

It doesn't works but it works if I separate them like this:

<script src="Resources/Tabs.js"></script>
<script>InitializeTabs(0, 4);</script>

So, is there any way to run JavaScript inside <script src="..."></script> tags? What I am missing?

No, there is no way to do that. A <script> has either a src or content, not both. — Pointy
– Pointy, Commented Apr 2, 2015 at 13:23
I didn't downvote - but why dollar signs on every variable? You only need to do that with PHP; you're making a lot of unnecessary globals this way. — Scott
– Scott, Commented Apr 2, 2015 at 13:32

DLeh · Accepted Answer · 2022-02-09 15:58:11Z

14

No, this is not possible. The html spec dictates that a <script> tag does one or the other.

<script>Tag Html Spec, emphasis mine.

The script may be defined within the contents of the SCRIPT element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as the script. If the src has a URI value, user agents must ignore the element's contents and retrieve the script via the URI.

edited Feb 9, 2022 at 15:58

answered Apr 2, 2015 at 13:24

DLeh

24.6k17 gold badges95 silver badges141 bronze badges

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

1 Comment

JJJ Over a year ago

If you talk about the HTML spec you should link to the spec, not to W3schools which is completely unrelated.

what is sleep · Accepted Answer · 2015-04-02 13:23:50Z

1

You are suppose to do it the second way. in <script src="Resources/Tabs.js">InitializeTabs(0, 4);</script> you are referencing an external javascript file, your inline code should go into a second script block.

answered Apr 2, 2015 at 13:23

what is sleep

9054 silver badges12 bronze badges

Comments

MightyPork · Accepted Answer · 2015-04-02 13:23:38Z

0

You can either use src, or put JavaScript inside the tag.

But not both at once. There's no downside to using two tags anyway (apart from larger file size).

answered Apr 2, 2015 at 13:23

MightyPork

19k10 gold badges87 silver badges136 bronze badges

Comments

Saagar Elias Jacky · Accepted Answer · 2015-04-02 13:27:17Z

0

When you include <script src="Resources/Tabs.js"></script>, you are mentioning that you want to use the Javascript which is included inside the Tabs.js file so that the compiler knows where to look for InitializeTabs function, when it is trying to execute the function.

Now if you want to include some Javascript inline, that is inside the HTML, hen you use the <script>... JAVASCRIPT HERE .... </script>

You need to do it like this

<script src="Resources/Tabs.js"></script>
<script>InitializeTabs(0, 4);</script>

answered Apr 2, 2015 at 13:27

Saagar Elias Jacky

2,6842 gold badges17 silver badges28 bronze badges

1 Comment

rpax Over a year ago

HTML is interpreted, not compiled.

user3310334 · Accepted Answer · 2015-04-02 13:49:42Z

You can't put javascript inside of <script src="... tags, but you could run a JavaScript file which parses the HTML, looking for <script src tags, which converts it into two tags.

For example,

<script src="Resources/Tabs.js">InitializeTabs(0, 4);</script>

would have to be converted into

<script src="Resources/Tabs.js"></script>
<script>InitializeTabs(0, 4);</script>

Here's the code I tried:

var tags = document.querySelectorAll("script[src]");
[].forEach.call(tags, function(elem){
  var text = elem.innerText;
  var src  = elem.src;
  var parent = elem.parentNode;
  parent.removeChild(elem);
  var newTag = document.createElement('script');
  newTag.setAttribute('src', src);
  parent.appendChild(newTag);
  var newTag = document.createElement('script');
  var t = document.createTextNode(text);
  newTag.appendChild(t);
  parent.appendChild(newTag);
});

in a JSFiddle

Collectives™ on Stack Overflow

Run JavaScript inside <script src="..."></script> Tags?

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related