javascript - 将 CSS 和 JavaScript 组合成一个文件并链接它

Question

我开发了一个小型在线应用程序，其中包含明显的 jQuery、BootStrap、其他第三方库以及 CSS 文件以及我自定义的 CSS 和 JavaScript，但我想将它们 bundle 在一起，因为我只有一个电话。

原因是因为此应用程序正在与几个在线网站一起使用，这些网站已经拥有这些库，但可能有一个过时的库，我的库将覆盖他们的库，这将导致网站无法正常工作。

我通过将所有库和 CSS 放入一个 HTML 文件来使用 HTML 导入，将其命名为 import.html 并制作一个简单的 <link rel="http://mywebsite.com/import"></link>它就像一个魅力，但它在 iOS 中不起作用。哦，是的，这是一款仅限智能手机的应用程序，仅适用于 iOS 和 Android。

但主要是因为我要将文件交给客户，并且希望尽可能少地提供代码以便于实现。

是否有另一种方法可以实现类似的场景？

Answer 1

您可以通过 JavaScript 将任意 HTML/CSS 引入 HTML。

例如:

var style = document.createElement("style");
var CSS = ".someCSS { background: red; }";
style.innerHTML = CSS; 
document.head.appendChild(style);

这种方法对于以编程方式修改和引入 CSS 很有用，但它肯定比在 <link> 中包含 CSS 慢很多。元素。 (这种方法使得编辑 CSS 变得困难，并且需要在构建 DOM 和 Style 表时绕过任何浏览器优化)

此外，您的帖子中有一个错误，iOS、Android 和大多数浏览器，绝对可以包含带有 <link rel = "..."> 的 CSS 。这被认为是立即执行此操作的权利，并且比我在上面发布的代码(这是您问题的答案)更快。您的代码无法正常工作的原因不是 iOS 上的 CSS/HTML 问题，更可能是您网站本身的问题。