加载<链接rel="将原始内容转换为<样式>标签

Load <link rel="stylesheet"> raw content into an <style> tag

本文关键字：转换 标签 样式 rel 链接 quot 加载 原始      更新时间：2023-09-26

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

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

  1. 在目标页面加载基础javascript
    2. 创建一个隐藏iframe，并在其上加载CSS <link>(异步文档)。编写调用)
  2. 在目标页面上下文中将CSS内容设置为javascript var。

步骤1和2已经实现并工作。那么，第三步应该如何实施呢?

在进行了一些新的测试之后，我会在这里发布任何阳性结果。

你不想用Javascript做一些可以用纯CSS完成的事情(或者至少很容易完成)。有很多人没有启用JS…我不认为你想限制他们访问你的网站。您正在寻找的可以用CSS @import规则完成。这很简单——您所需要做的就是将@import "path/to/css/file"放在所有其他样式规则之上。路径是相对于当前样式表的;如果它在HTML文件中，那么它是相对于HTML文件的。

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

相关文章：