Как работает атрибут данных в атрибуте src тега script?

Question

У меня есть несколько 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, но это не так. почему так?

Answer 1

Из документов MDN для тега сценария :

src

Этот атрибут указывает URI внешнего сценария; это можно использовать в качестве альтернативы встраиванию скрипта непосредственно в документ.

⚠️ Если элементу скрипта указан атрибут src, ему не следует включать скрипт в свои теги.

Как можно встроить скрипт непосредственно в документ (кроме встраивания его между <script> тегами)?

Вот еще один отрывок из Документы MDN , для URI данных:

URL-адреса данных, URL-адреса с префиксом data: схема, позволяющие создателям содержимого встраивать небольшие документы в документы.

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>

Ваш фрагмент кода, возможно, предназначен для объяснения поведения тегов скрипта.