如何向动态插入的脚本传递参数

How to pass parameters to dynamically inserted SCRIPTs

本文关键字：脚本 参数 插入 动态      更新时间：2023-09-26

关于如何参数化脚本已经写了很多。这里有一个很好的关于SO方法的概述。那篇文章和我找到的关于脚本参数化主题的所有其他内容都做出了以下两个假设之一:

  1. SCRIPT元素在页面上是硬编码的，因此，当其代码运行时，它是页面上的最后一个SCRIPT元素，这使得它很容易被发现。然后是读取数据属性等的简单问题。

  2. SCRIPT元素在某些方面是唯一可识别的，例如，id或src文件名等

如果上述两个假设都不成立，而且不可能进行服务器端定制，而我们希望缓存脚本，那么参数化脚本的方法是什么?

作为一个例子，考虑一个异步场景，在页面的顶部窗口中，JavaScript可以在任何时间点的内容中添加任意数量的具有相同src URL的SCRIPT元素，而其他不相关的DOM更改正在发生。每个脚本必须接收一个字符串参数。每个字符串参数值在该页的上下文中是唯一的。

在我看来，第一个假设总是正确的，但不是以你理解的方式…

从您提供的链接中，在本文中，我们有:

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

这段代码甚至可以在你描述的上下文中工作。

假设我们有3个脚本标签，当第一个标签执行时，其他标签甚至还不存在，所以严格来说它是最后一个脚本标签:)

执行下面的代码，看看会发生什么:

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

对于最近附加的脚本也是如此，您只需要确保添加这些脚本的人确实附加了这些标记(作为head标记的最后一个子)。

相关文章：