How does the data attribute in the attribute src of script tag work?

Question

I hava some js code below,what's the data in src? how does it works?

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

details:

    <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>

the src value should be setted a url,but this does not. why so?

@jro I know it looks like the OP wats it (see he initializes the "inc" to zero.) — לבני מלכה
– לבני מלכה, Commented Mar 12, 2019 at 7:25

Community · Accepted Answer · 2020-06-20 09:12:55Z

From the MDN docs for the script tag:

src

This attribute specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.

⚠️ If a script element has a src attribute specified, it should not have a script embedded inside its tags.

How can you embed a script directly within a document (other than embedding it between <script> tags)?

Here's another excerpt from MDN docs, on data URI:

Data URLs, URLs prefixed with the data: scheme, allow content creators to embed small files inline in documents.

data:text/javascript indicates that it's a javascript document. Other type of interest is data:text/html, you can also do something like data:text/html,<script>/* some js code */</script>

I have seen it being more commonly used to embed small image in css, i.e

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

So your example is basically equivalent to:

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

Your excerpt of code perhaps is meant to explain how script tags behave.

Collectives™ on Stack Overflow

How does the data attribute in the attribute src of script tag work?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related