在 <script src= "..." > Tags 中运行 JavaScript</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>标记执行其中一个或另一个操作。

<script>标记Html规范，强调我的。

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

Answer 2

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

Answer 3

您可以使用src，也可以将JavaScript放入标记中。

但不是同时两种。无论如何，使用两个标签都没有缺点（除了文件大小更大之外）。

Answer 4

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

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

你需要像这样做

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

Answer 5

您不能将javascript放在<script src="...标记中，但您可以运行一个javascript文件来解析HTML，查找<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 中