在 <script> 标签位置插入元素答案

【问题标题】：Insert elements at <script> tag position在 <script> 标签位置插入元素
【发布时间】：2011-02-16 21:23:08
【问题描述】：

当网站为您提供一些 JavaScript 并粘贴到网页中以在该位置插入内容时，该脚本如何确定其在 DOM 中的当前位置？不使用document.write？

谢谢，

尼克

【问题讨论】：

你有在哪里做的例子吗？

标签： javascript embed

【解决方案1】：

我不明白为什么这些脚本会关心它们在 DOM 中的位置，但我想这是可以确定的。或许可以使用 document.scripts 之类的东西来开始搜索。

【讨论】：

我在 Mozilla 参考中没有看到 document.scripts：developer.mozilla.org/en/DOM/document 所以我猜那是 IE 独有的东西？不过可能是错的，我正在运行 Chrome，不想检查！ :) 不过谢谢。
这是一个很早以前的 IE 扩展，在 WebKit 和 Opera 上也可以使用。虽然它没有给你任何 getElementsByTagName 还没有的东西，但它从来没有真正被看到有多大用处。

【解决方案2】：

在脚本包含时，可以确定页面中的最后一个<script> 将是当前的；页面的其余部分尚未解析。所以：

<script type="text/javascript">
    var scripts= document.getElementsByTagName('script');
    var this_script= scripts[scripts.length-1];

    // Something that happens later...
    //
    setTimeout(function() {
        var div= document.createElement('div');
        div.appendChild(document.createTextNode('Hello!'));
        this_script.parentNode.insertBefore(div, this_script);
    }, 5000);
</script>

只要脚本标签不使用 defer 或 HTML5 的 async，这就是正确的。

【讨论】：

没有意识到它会这样工作，但非常有意义，谢谢！

【解决方案3】：

我自己也在寻找答案，我的情况是“创建一个动态 src 并将其添加到一个固定位置的脚本元素”。

<script>Other code</script>
//Add my dynamically calculated script right here

我用过类似的东西

<script>document.write('<script src="myJs.js?v=' + Math.floor(Math.random() * 100) + '"\><\/script>');</script>

它有效，但灯塔审计将其标记为不好的做法。为了提高我的性能得分，我不得不删除在多个地方使用的 document.write。我写了下面的函数，并在我想添加这样的脚本的任何地方调用它：

<script type="text/javascript">
    function insertScriptHere(src){
        var script = document.createElement('script');
        script.setAttribute("src", src + Math.floor(Math.random() * 100));
        document.currentScript.insertAdjacentElement('afterEnd', script);
    }
</script>
....
<script>insertScriptHere("myJs.js?v=");</script>

现在它正在工作，并且审计报告中不再存在“避免使用 document.write()”的标志。

【讨论】：