在里面运行JavaScript <script src=“…”></script> 标签？

Question

我有一个处理制表符开关的JavaScript文件。 这是来源：

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

我试图尽可能地缩短它：

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

它不起作用，但如果我将它们分开，它会起作用：

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

那么，有没有办法在<script src="..."></script>标签内运行JavaScript？ 我错过了什么？

Answer 1

不，这是不可能的。 html规范规定<script>标签执行其中一个。

W3学校 ，重点是我的。

该元素包含脚本语句， 或者通过src属性指向外部脚本文件。

注意：如果存在“src”属性，则该元素必须为空。

<script>标签Html Spec ，强调我的。

脚本可以在SCRIPT元素的内容中定义，也可以在外部文件中定义。 如果未设置src属性，则用户代理必须将该元素的内容解释为脚本。 如果src具有URI值，则用户代理必须忽略该元素的内容并通过URI检索脚本。

Answer 2

您可以使用src ，也可以将JavaScript放在标记内。

但不是两个一次。 无论如何使用两个标签没有任何缺点（除了更大的文件大小）。

Answer 3

你想以第二种方式去做。 在<script src="Resources/Tabs.js">InitializeTabs(0, 4);</script>您正在引用外部javascript文件，您的内联代码应该进入第二个脚本块。

Answer 4

当您包含<script src="Resources/Tabs.js"></script> ，您提到您要使用Tabs.js文件中包含的Javascript，以便编译器知道在哪里查找InitializeTabs函数，当它试图执行该功能时。

现在，如果你想要包含一些内联的Javascript，那就在HTML中，那么你使用<script>... JAVASCRIPT HERE .... </script>

你需要这样做

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

Answer 5

你不能把javascript放在<script src="...标签里面，但你可以运行一个解析HTML的JavaScript文件，寻找<script src标签，将其转换为两个标签。

例如，

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

必须转换成

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

这是我试过的代码：

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

在JSFiddle中