CODEWITHSUNDEEP
javascripthtml
Fatih Mar
Fatih Mar

Reputation: 2500

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

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?

Upvotes: 13

Views: 16415

Answers (5)

DLeh
DLeh

Reputation: 24405

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.

Upvotes: 14

user3310334
user3310334

Reputation:

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

Upvotes: 0

Saagar Elias Jacky
Saagar Elias Jacky

Reputation: 2688

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>

Upvotes: 0

what is sleep
what is sleep

Reputation: 905

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.

Upvotes: 1

MightyPork
MightyPork

Reputation: 18901

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).

Upvotes: 0

Related Questions