script 标签的属性 src 中的 data 属性是如何工作的？答案

【问题标题】：How does the data attribute in the attribute src of script tag work?script 标签的属性 src 中的 data 属性是如何工作的？
【发布时间】：2023-03-31 07:54:01
【问题描述】：

我下面有一些js代码，src中的数据是什么？它是如何工作的？

script.src = "data:text/javascript,inc++"

详情：

    <script>
        //Initialize the "inc" to zero.
        var inc = 0;
        //Get the HEAD element from the document.
        var head = document.documentElement.firstChild;
        //Create and initialize SCRIPT elements in a loop,
        //they will execute 2 times of the "inc++" code.
        for (var i = 0; i < 2; i++) {
            var script = document.createElement("script");
            script.src = "data:text/javascript,inc++"; // how does the data works?
            head.insertBefore(script, head.firstChild);
            script.onload = function () {
                console.log(inc);
            };
        };
    </script>

src 值应该设置一个 url，但这不是。为什么会这样？

【问题讨论】：

这是一个data URI
使用script.src = "data:text/javascript," + inc++;
我相信您需要使用 base 64 对其进行编码
@לבני-מלכה 那将是"data:text/javascript,0"
@jro 我知道它看起来像 OP wats（见他将“inc”初始化为零。）

标签： javascript html css web ecmascript-6

【解决方案1】：

来自MDN docs for the script tag：

src

此属性指定外部脚本的 URI； 这可以用作直接在文档中嵌入脚本的替代方法。

⚠️ 如果脚本元素指定了 src 属性，则不应在其标签中嵌入脚本。

如何将脚本直接嵌入到文档中（除了嵌入在<script> 标签之间）？

这是来自 MDN docs 的另一段关于数据 URI 的摘录：

数据 URL，以 data: 为前缀的 URL 方案，允许内容创建者将小文件内嵌在文档中。

data:text/javascript 表示它是一个 javascript 文档。其他类型的兴趣是data:text/html，你也可以做类似data:text/html,<script>/* some js code */</script>的事情

我已经看到它更常用于在 css 中嵌入小图像，即

div {
  background: url(data:image/png;base64,....); <-- image encoded in base64
}

所以你的例子基本上相当于：

<script>
  var inc = 0;
  for (var i = 0; i < 2; i++) {
    var script = document.createElement("script");
    inc++;
    console.log(inc);
  };
</script>

您的代码摘录可能是为了解释脚本标签的行为方式。

【讨论】：