如何引用加载当前执行脚本的脚本标记?

如何引用加载当前运行的javascript的脚本元素?

情况是这样的。我有一个“主”脚本被加载在页面的高，第一件事下的头标签。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="scripts.js"></script>

在“scripts.js”中有一个脚本，需要能够按需加载其他脚本。正常的方法不太适合我，因为我需要添加新的脚本而不引用HEAD标记，因为HEAD元素还没有完成渲染:

document.getElementsByTagName('head')[0].appendChild(v);

我要做的是引用加载当前脚本的脚本元素，这样我就可以在它之后将新的动态加载的脚本标记追加到DOM中。

<script type="text/javascript" src="scripts.js"></script>
loaded by scripts.js--><script type="text/javascript" src="new_script1.js"></script>
loaded by scripts.js --><script type="text/javascript" src="new_script2.js"></script>

当前回答

如何获取当前脚本元素:

1. 使用document.currentScript

文档。currentScript将返回当前正在处理的<script>元素。

<script>
var me = document.currentScript;
</script>

好处

简单明了。可靠的。不需要修改脚本标记使用异步脚本(defer & async) 使用动态插入的脚本

问题

不能在旧的浏览器和IE中工作。 <script type="module">

2. 按id选择脚本

给脚本一个id属性可以让您使用document.getElementById()从内部通过id轻松地选择它。

<script id="myscript">
var me = document.getElementById('myscript');
</script>

好处

简单明了。可靠的。几乎得到了普遍支持使用异步脚本(defer & async) 使用动态插入的脚本

问题

需要向脚本标记添加自定义属性 Id属性在某些边缘情况下可能会导致某些浏览器中的脚本出现奇怪的行为

3.使用data-*属性选择脚本

给脚本一个data-*属性可以让您轻松地从内部选择它。

<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>

与前一个选项相比，这几乎没有什么好处。

好处

简单明了。使用异步脚本(defer & async) 使用动态插入的脚本

问题

需要向脚本标记添加自定义属性 HTML5和querySelector()在所有浏览器中都不兼容与使用id属性相比，支持较少将绕过<script>与id边缘情况。如果页面上的另一个元素具有相同的数据属性和值，则可能会混淆。

4. 根据src选择脚本

不使用数据属性，你可以使用选择器根据源来选择脚本:

<script src="//example.com/embed.js"></script>

在embed.js:

var me = document.querySelector('script[src="//example.com/embed.js"]');

好处

可靠的使用异步脚本(defer & async) 使用动态插入的脚本不需要自定义属性或id

问题

不工作的本地脚本会在不同的环境中造成问题，比如开发和生产静止而脆弱。更改脚本文件的位置需要修改脚本与使用id属性相比，支持较少是否会导致问题，如果你加载相同的脚本两次

5. 遍历所有脚本以找到所需的脚本

我们还可以遍历每个脚本元素，并逐个检查以选择我们想要的元素:

<script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; ++i) {
    if( isMe(scripts[i])){
      me = scripts[i];
    }
}
</script>

这让我们可以在不很好地支持querySelector()属性的旧浏览器中使用上述两种技术。例如:

function isMe(scriptElem){
    return scriptElem.getAttribute('src') === "//example.com/embed.js";
}

这继承了采用任何方法的优点和问题，但不依赖于querySelector()，因此可以在旧的浏览器中工作。

6. 获取最后执行的脚本

由于脚本是按顺序执行的，所以最后一个script元素通常是当前运行的脚本:

<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>

好处

简单。几乎得到了普遍支持不需要自定义属性或id

问题

不能使用异步脚本(defer & async) 不与动态插入的脚本一起工作

2014-03-30 15:02:49

其他回答

处理异步和延迟脚本的一种方法是利用onload处理程序——为所有脚本标记设置一个onload处理程序，第一个执行的处理程序应该是你的。

function getCurrentScript(callback) {
  if (document.currentScript) {
    callback(document.currentScript);
    return;
  }
  var scripts = document.scripts;
  function onLoad() {
    for (var i = 0; i < scripts.length; ++i) {
      scripts[i].removeEventListener('load', onLoad, false);
    }
    callback(event.target);
  }
  for (var i = 0; i < scripts.length; ++i) {
    scripts[i].addEventListener('load', onLoad, false);
  }
}

getCurrentScript(function(currentScript) {
  window.console.log(currentScript.src);
});

2013-08-06 21:32:13

只有当脚本没有“defer”或“async”属性时，才会按顺序执行。知道脚本标记的ID/SRC/TITLE属性之一也可以在这些情况下工作。Greg和Justin的建议都是正确的。

已经有人提议起草一份文件。WHATWG列表中的currentScript。

编辑:Firefox > 4已经实现了这个非常有用的属性，但它在IE11中不可用，我最后检查，只有在Chrome 29和Safari 8中可用。

编辑:没有人提到“文件”。但我相信下面可能是一个很好的跨浏览器的替代方案，以获得当前运行的脚本:

var me = document.scripts[document.scripts.length -1];

2010-09-12 16:56:02

可能最简单的方法就是给你的scrip标签一个id属性。

2008-12-31 20:29:42

遵循以下简单步骤获取当前正在执行的脚本块的引用:

在脚本块中放入一些随机的唯一字符串(在每个脚本块中必须是唯一的/不同的) document.getElementsByTagName('script')的迭代结果，从每个内容中查找唯一的字符串(从innerText/textContent属性获得)。

示例(ABCDE345678是唯一的ID):

<script type="text/javascript">
var A=document.getElementsByTagName('script'),i=count(A),thi$;
for(;i;thi$=A[--i])
  if((thi$.innerText||thi$.textContent).indexOf('ABCDE345678'))break;
// Now thi$ is refer to current script block
</script>

顺便说一句，对于你的情况，你可以简单地使用老式的document.write()方法来包含另一个脚本。正如你提到的DOM还没有被呈现，你可以利用浏览器总是以线性顺序执行脚本的事实(除了延迟的脚本将在以后呈现)，所以你的文档的其余部分仍然是“不存在”的。通过document.write()编写的任何内容都将放在调用者脚本之后。

原始HTML页面示例:

<!doctype html>
<html><head>
<script src="script.js"></script>
<script src="otherscript.js"></script>
<body>anything</body></html>

script.js的内容:

document.write('<script src="inserted.js"></script>');

渲染后，DOM结构将变成:

HEAD
  SCRIPT script.js
  SCRIPT inserted.js
  SCRIPT otherscript.js
BODY

2012-02-26 07:44:44

考虑一下这个算法。当你的脚本加载时(如果有多个相同的脚本)，查看文档。脚本，找到第一个具有正确的“src”属性的脚本，并保存它，并使用数据属性或唯一的className将其标记为“visited”。

当加载下一个脚本时，扫描文档。再次执行脚本，传递已经标记为访问过的任何脚本。以该脚本的第一个未访问实例为例。

这假设相同的脚本可能会按照它们加载的顺序执行，从头部到主体，从上到下，从同步到异步。

(function () {
  var scripts = document.scripts;

  // Scan for this data-* attribute
  var dataAttr = 'data-your-attribute-here';

  var i = 0;
  var script;
  while (i < scripts.length) {
    script = scripts[i];
    if (/your_script_here\.js/i.test(script.src)
        && !script.hasAttribute(dataAttr)) {

        // A good match will break the loop before
        // script is set to null.
        break;
    }

    // If we exit the loop through a while condition failure,
    // a check for null will reveal there are no matches.
    script = null;
    ++i;
  }

  /**
   * This specific your_script_here.js script tag.
   * @type {Element|Node}
   */
  var yourScriptVariable = null;

  // Mark the script an pass it on.
  if (script) {
    script.setAttribute(dataAttr, '');
    yourScriptVariable = script;
  }
})();

这将扫描所有脚本，查找第一个没有标记特殊属性的匹配脚本。

然后，如果找到该节点，就用data-属性标记它，这样后续扫描就不会选择它。这类似于图遍历BFS和DFS算法，其中节点可能被标记为“已访问”以防止重访。

2017-06-12 18:43:55

如何引用加载当前执行脚本的脚本标记?

推荐文章

最新文章

标签