将<link rel =“stylesheet”/>原始内容加载到<style>标记</style>中

Question

我的平台在同一网页上提供了一些类似的小部件。这些小部件嵌入在iframe中，并在它们之间共享相同的CSS定义。

当前版本使用<link rel="stylesheet">标记加载此定义。但是，我正在考虑将加载策略更改为<style>标记内的css内联定义。

1. 在目标网页上加载基本javascript
2. 创建隐藏的iframe，并在其上加载CSS <link>（异步document.write调用）
3. 将此CSS内容设置为目标页面上下文中的javascript var。

步骤1和2已经实施并正常运行。现在，第3步应该如何实施？

经过一些新的测试后，我会在这里发布任何积极的结果。

Answer 1

你没有想要使用Javascript来完成可以用纯CSS完成（或至少可以轻松完成）的东西。有很多人没有启用JS ......我不认为你想限制他们访问你的网站。您正在寻找的是CSS @import规则。它非常简单 - 您需要做的就是将@import "path/to/css/file"放在所有上方的其他样式规则上。路径相对于当前样式表;如果它在HTML文件中，那么它相对于HTML文件。

例如，如果您有一个像stackunderflow.com这样的域，顶级文件夹中的样式表，以及名为style2.css的文件夹中名为extra-styles的样式表，那么您可以导入样式表来自extra-styles的相对路径@import "extra-styles/style2.css"另一个好处是几乎所有浏览器都支持它。