Run JavaScript inside <script src = "..."> </script> Tags?
I have a JavaScript file that handles 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 try to make it as short as possible, like this:
<script src="Resources/Tabs.js">InitializeTabs(0, 4);</script> This does not work, but it works if I separate them as follows:
<script src="Resources/Tabs.js"></script> <script>InitializeTabs(0, 4);</script> So, is there a way to run JavaScript inside the <script src="..."></script> ? What am I missing?
No, It is Immpossible. The html specification indicates that the <script> does one or the other.
W3 Schools , my emphasis.
The element either contains script instructions, or , it points to an external script file through the src attribute.
Note. If the "src" attribute is present, the element must be empty.
<script> html Spec tag , emphasis mine.
A script can be defined in the contents of a script element or in an external file. If the src attribute is not set, user agents must interpret the contents of the element as a script. If the src value has a URI value, user agents should ignore the contents of the element and retrieve the script through the URI.
You can use src or put javascript inside the tag.
But not both at once. In any case, there is no shortage of using two tags (except for the large file size).
You have 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 the second script block.
When you include <script src="Resources/Tabs.js"></script> , you indicate that you want to use Javascript, which is included in the Tabs.js file, so that the compiler knows where to look for the InitializeTabs function when it tries to execute the function .
Now, if you want to include some of the built-in Javascript lines inside HTML, use <script>... JAVASCRIPT HERE .... </script>
You need to do it like this:
<script src="Resources/Tabs.js"></script> <script>InitializeTabs(0, 4);</script> You cannot put javascript inside the <script src="... tags, but you can run a JavaScript file that parses the HTML, looks for the <script src tags, which converts it into two tags.
For example,
<script src="Resources/Tabs.js">InitializeTabs(0, 4);</script> would need to be converted to
<script src="Resources/Tabs.js"></script> <script>InitializeTabs(0, 4);</script> Here is 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); });