在里面運行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中