在 <script src="..."></script> 标签中运行 JavaScript？答案

【问题标题】：Run JavaScript inside <script src="..."></script> Tags?在 <script src="..."></script> 标签中运行 JavaScript？
【发布时间】：2015-06-07 11:21:18
【问题描述】：

我有一个处理选项卡切换的 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？我错过了什么？

【问题讨论】：

没有。你需要有一个单独的脚本标签。
不，没有办法做到这一点。 <script> 具有任一 src 或内容，而不是两者。
在你定义它之后立即调用 InitializeTabs。
我没有投反对票 - 但为什么每个变量上都有美元符号？你只需要用 PHP 来做；你用这种方式制作了很多不必要的全局变量。
@ScottKaye 哦...我来自 PHP，好点子！ :)

标签： javascript html

【解决方案1】：

不，这是不可能的。 html 规范规定 <script> 标记可以做其中之一。

W3 Schools，强调我的。

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

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

<script>Tag Html Spec，强调我的。

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

【讨论】：

如果您谈论 HTML 规范，您应该链接到规范，而不是完全不相关的 W3schools。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

但不能同时进行。无论如何，使用两个标签没有任何缺点（除了更大的文件大小）。

【讨论】：

【解决方案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>

【讨论】：

HTML 被解释，而不是编译。

【解决方案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);
});

in a JSFiddle

【讨论】：