How to pass parameters to dynamically inserted SCRIPTs

Question

Much has been written about how to parameterize SCRIPTs. There is a nice overview of approaches on SO. That post and everything else I've found on the topic of script parameterization make one of the following two assumptions:

The SCRIPT element is hardcoded on the page and, therefore, it is the last SCRIPT element on the page when its code runs, making it easy to discover. Then it's a simple matter of reading data attributes, etc.
The SCRIPT element is uniquely identifiable in some way, e.g., id or src filename, etc.

What's an approach to parameterizing SCRIPTS when neither of the above assumptions are true and, further, there is no possibility for server-side customization and we want the script to be cached?

As an example, consider an async scenario where in the top window of a page JavaScript may add any number of SCRIPT elements with the same src URL anywhere in the content at any point of time while other unrelated changes to the DOM are happening. Each script must receive one string parameter. Each string parameter value is unique within the context of the page.

NaN · Answer 1 · 2014-06-04T01:14:59.017

From my point of view the first assumption is always true, but not in the way that you understood it...

From the links your provided, in this article, we have:

var scripts = document.getElementsByTagName('script');
var index = scripts.length - 1;
var myScript = scripts[index];
// myScript now contains our script object

This code works even in the context that you described.

Let's say we have 3 script tags, when the first one executed the other tags doesn't even exist yet, so it's technically the last script tag :)

Execute this code and see what happens:

    <html>
        <head>
            <script id="script-a">
                var scripts = document.getElementsByTagName('script');
                var index = scripts.length - 1;
                var myScript = scripts[index];
                // myScript now contains our script object

                document.writeln('<br>myScript.id = ' + myScript.id);
                document.writeln('<br>scripts.length = ' + scripts.length);
                document.writeln('<br>----------------');
            </script>
            <script id="script-b">
                var scripts = document.getElementsByTagName('script');
                var index = scripts.length - 1;
                var myScript = scripts[index];
                // myScript now contains our script object

                document.writeln('<br>myScript.id = ' + myScript.id);
                document.writeln('<br>scripts.length = ' + scripts.length);
                document.writeln('<br>----------------');
            </script>
        </head>
    </html>

The same goes for lately appended scripts, you just need to make sure that the guy adding those scripts is really appending these tags (as a last child of the head tag).

The question explicitly stated that SCRIPT tags can be added at any time, anywhere on the page so this approach won't work. Consider a case where 5mins after a single page app is loaded, based on a user action, a SCRIPT tag is added in the middle of the DOM. — Sim, Jun 04 '14 at 01:29
@Sim I tough that was just an example of an absurd context, because that's what it is... good luck — NaN, Jun 04 '14 at 03:12
yes, if you don't know how to approach a problem, it may be easier to think it is absurd... — Sim, Jun 04 '14 at 05:16

How to pass parameters to dynamically inserted SCRIPTs

1 Answers1