有没有办法从字符串加载css和javascript？答案

【问题标题】：Is there any way to load css and javascript from a string?有没有办法从字符串加载css和javascript？
【发布时间】：2012-05-14 12:45:45
【问题描述】：

我见过很多从文件中动态加载 CSS 和 javascript 的例子。 Here's a good example。但是有没有办法将 CSS 或 javascript 作为字符串加载？例如，类似：

var style = ".class { width:100% }"
document.loadStyle(style);

或者类似的东西。

【问题讨论】：

标签： javascript html css web

【解决方案1】：

var javascript = "alert('hello');";
eval(javascript);

这将从字符串加载 JavaScript，但请注意，这是非常不安全的，不推荐使用。如果恶意进程曾经干扰过您的 JavaScript 字符串，则可能会导致安全问题。

就 CSS 而言，您可以使用 jQuery 将样式标签附加到页面，如下所示：

$('head').append("<style>body { background-color: grey; }</style>");

或者，对于 JavaScript 纯粹主义者：

var s = document.createElement("style");
s.innerHTML = "body { background-color:white !important; }";
document.getElementsByTagName("head")[0].appendChild(s);

【讨论】：

更多阅读：[javascript] [eval] evil

【解决方案2】：

另一种不使用具有潜在危险的eval 和innerHTML 的方法是使用base64 编码的URL 创建link 元素：

function loadCSS(cssStyles) {
  const link = document.createElement('link');
  link.href = `data:text/css;base64,${btoa(cssStyles)}`;
  link.type = 'text/css';
  link.rel = 'stylesheet';
  document.getElementsByTagName('head')[0].appendChild(link);
}

【讨论】：

【解决方案3】：

但是，此代码仅适用于包含样式标签的单个 HTML 文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style></style>
</head>
<body>
    <div class="foo"></div>
    <div class="bar"></div>
</body>
<script>
    const cssText = `.foo{
            background-color: black;
            width: 100px;
            height: 100px;
        }
        .bar{
            background-color: gray;
            width: 100px;
            height: 100px;
        }`
    document.querySelector("style").innerText = cssText;
</script>
</html>```

【讨论】：