javascript - 如何创建 javascript 文件的外部列表

Question

在我的几个网站的底部，我有一个javascript/css引用文件列表，比如

<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<script src="http://domain.co.uk/jquery-3.2.1.min.js"></script>
<script src="http://domain.co.uk/jquery-ui.min.js"></script>
<script src="http://domain.co.uk/helpers.js"></script>

它们都指向我拥有的另一个网站。这是有效的，因为我只需要更新文件的内容，因为它们都指向相同的文件位置更新很容易。

我遇到的问题是，如果我想添加一个新文件(javascript 或 css)，那么我必须添加一个新的 <script...或 <link...到每个有这个列表的网站。

我想做的是将该列表移到外部文件中，并在那里引用它。

如

网站 1

<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>

网站2

<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>

因此，myCssFiles.cs 的内容可以是

<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<link rel="stylesheet" href="http://domain.co.uk/general2.css" />
<link rel="stylesheet" href="http://domain.co.uk/general3.css" />

对于 javascript 也是如此。

我怎样才能做到这一点？

请注意，我控制这些网站，CORS 不是问题。

Answer 1

希望对您有所帮助，

你可以有 common.js 来包含你所有的 js 文件

通用.js

var scripts = {
"http://domain.co.uk/jquery-3.2.1.min.js",
"http://domain.co.uk/jquery-ui.min.js"
}

scripts.forEach(function(data) {
    var x = document.createElement('script');
    x.src = data;
    document.getElementsByTagName("body")[0].appendChild(x);
});

您可以拥有一个 common.js 文件，并根据需要向脚本数组添加链接。您只需在您的网站中包含 common.js。