查找当前脚本的推荐方法？

Question

我正在编写一个脚本，需要将 DOM 元素添加到页面中脚本所在的位置（类似于小部件的方法）。 最好的方法是什么？

以下是我正在考虑的技术：

1. 在脚本正上方包含一个带有 id="Locator" 的元素。问题：
   • 我不喜欢额外的标记
   • 如果我在页面中重复使用该小部件，则多个元素将具有相同的“定位器”id。我正在考虑在脚本中添加一行来删除曾经使用过的 id，但仍然......
2. 向脚本添加一个 id。问题：
   • 尽管它似乎有效，但 id 属性对于脚本元素无效
   • 与上面相同的问题，如果我在页面中重复使用脚本，多个元素将具有相同的 id。
3. 使用 getElementsByTagName("script") 并选择最后一个元素。到目前为止，这对我有用，它看起来有点重，我不确定它是否可靠（考虑延迟脚本）

4. document.write：不优雅，但似乎可以完成工作。

5. [编辑]根据idealmachine的回复，我正在考虑另一种选择：

   • 在脚本标记中包含一个属性，例如 goal="tabify"。
   • 使用 getElementsByTagName("script") 获取所有脚本。
   • 循环遍历脚本并检查 goal="tabify" 属性以查找我的脚本。
   • 删除目标属性，以防页面中存在其他小部件。

6. [编辑]另一个想法，也受到迄今为止回复的启发：

   • 使用 getElementsByTagName("script") 获取所有脚本。
   • 循环遍历脚本并检查innerHTML 以找到我的脚本。
   • 在脚本末尾，删除脚本标记，以防页面中存在其他小部件。

Answer 1

开箱即用：document.currentScript （不是IE 支持）

Answer 2

我曾在 OnlyWire 工作过，该公司提供可放置在您网站上的小部件作为其主要服务。

我们使用 var script = document.getElementsByTagName("script"); var thisScript = scripts[scripts.length - 1]; 这个技巧看起来效果很好。然后我们使用 thisScript.parentNode.insertBefore(ga, thisScript); 在 DOM 树中的前面插入我们想要的任何内容。

我不确定我是否理解为什么您认为这是一个“重型”解决方案......它不涉及迭代，它是一个完美集成的纯粹的跨浏览器解决方案。

Answer 3

这适用于页面上相同代码的多个副本以及动态插入的代码：

<script type="text/javascript" class="to-run">
(function(self){
    if (self == window) {
        var script = document.querySelector('script.to-run');
        script.className = '';
        Function(script.innerHTML).call(script);
    } else {
        // Do real stuff here. self refers to current script element.
        console.log(1, self);
    }
})(this);
</script>

Answer 4

document.write 或选择最后一个脚本元素将适用于大多数网页中同步加载的脚本。但是，我认为有一些选项您没有考虑允许异步加载：

• 在脚本之前添加带有 class="Locator" 的 div 。 HTML 类的优点是重复项不会无效。当然，为了处理多个小部件的情况，您需要在添加 HTML 元素后更改元素的类名称，这样就不会添加两次。 （请注意，一个元素也可能是多个类的成员；它是一个以空格分隔的列表。）

• 检查每个脚本元素的 src 可以确保跟踪代码（ 例如 Google Analytics 旧版跟踪代码）和在页面最后加载的其他脚本在使用异步加载时不会阻止您的脚本正常工作。同样，要处理多个小部件的情况，您可能需要在使用完毕后删除脚本元素（即当所需的代码已添加到页面时）。

---

我要提出的最后一个评论（尽管您可能已经意识到这一点）是，在编写小部件时，您需要使用 var 声明所有变量并包含所有变量代码：（JSLint 可以帮助检查这一点）

(function(){
    ...
})();

这被称为“自动执行函数”，并将确保脚本中使用的变量不会干扰网页的其余部分。

Answer 5

无论您放入

但是，如果您需要在小部件所在的位置添加脚本标记，我不明白使用 document.write() 放置 div 有什么问题。

Answer 6

我刚刚找到了另一种似乎可以回答我的问题的方法：

如何从 javascript 访问父 Iframe

将脚本嵌入到 iframe 中可以随时找到它，因为脚本始终保留对其自己窗口的引用。

我认为这是最好的方法，因为无论您将脚本添加到页面多少次（想想小部件），它总是有效。欢迎您发表评论。

首先促使我考虑 iframe 的是我为构建 Google 小工具所做的一个实验。

Answer 7

在许多情况下，这很有效（hud.js 是 scipt 的名称）：

var jsscript = document.getElementsByTagName("script"); 
for (var i = 0; i < jsscript.length; i++) { 
      var pattern = /hud.js/i; 
      if ( pattern.test( jsscript[i].getAttribute("src") ) )
      {
         var parser = document.createElement('a');
         parser.href = jsscript[i].getAttribute("src");
         host = parser.host; 
      }

 }

Answer 8

您还可以在其中添加单个脚本的名称。

• 在一些js脚本内

   数据集['my_prefix_name'] = 'someScriptName'
  

• 内，要么在 HTML 内 - 在

并通过循环 document.scripts 数组来搜索下一个合适的标签：

 ... function(){
    for (var i = 0, n = document.scripts.length; i < n; i++) {
        var prefix = document.scripts[i].dataset['my_prefix_name']
        if (prefix == 'whatYouNeed') 
           return prefix
    }
 }

Answer 9

我从那时起就无法访问 Internet Explorer，但这应该几乎可以在任何地方工作：

<script src="script.js"
    data-count="30"
    data-headline="My headline"
    onload="uniqueFunctionName(this)"
    defer
    ></script>

并且在 script.js 中：

window.uniqueFunctionName = function (currentScript) {
   var dataset = currentScript.dataset
   console.log(dataset['count'])
   console.log(dataset['headline'])
}