如何引用加载当前执行的脚本的脚本标签？

Question

如何引用加载当前执行的脚本的脚本标签？

386

我如何引用当前正在运行的JavaScript加载的脚本元素？

这是情况。我有一个“主”脚本，在页面顶部被加载，位于HEAD标签下的第一件事。

<!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);

我想要做的是引用加载当前脚本的script元素，这样我就可以在它后面将我的新动态加载的脚本标签添加到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>

- geuis

1

警告：在DOM仍在加载时修改它将会导致IE6和IE7的问题。最好在页面加载后运行该代码，以免出现麻烦。 - Kenan Banks

8

现在看起来已经可以在 caniuse 网站上查看了：http://caniuse.com/#feat=document-currentscript - Tyler

14个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- geuis · Answer 1

我已经有这个东西了，在FF3，IE6和7中都可以工作。在按需加载的脚本中的方法直到页面加载完成后才可用，但这仍然非常有用。

//handle on-demand loading of javascripts
makescript = function(url){
    var v = document.createElement('script');
    v.src=url;
    v.type='text/javascript';

    //insertAfter. Get last <script> tag in DOM
    d=document.getElementsByTagName('script')[(document.getElementsByTagName('script').length-1)];
    d.parentNode.insertBefore( v, d.nextSibling );
}

- Ron Newcomb · Answer 2

我曾经使用这个与eval相比的常规方法来动态插入script标签，并在添加到DOM之前设置了一个全局属性currentComponentScript。

  const old = el.querySelector("script")[0];
  const replacement = document.createElement("script");
  replacement.setAttribute("type", "module");
  replacement.appendChild(document.createTextNode(old.innerHTML));
  window.currentComponentScript = replacement;
  old.replaceWith(replacement);

但在循环中无法正常工作。DOM 直到下一个宏任务才运行脚本，因此一批脚本只能看到最后设置的值。您需要将整个段落 setTimeout，然后在前一个完成后 setTimeout 下一个。即链接 setTimeouts，而不仅是从循环中连续调用 setTimeout。

- Justin Love · Answer 3

如果你能假定脚本的文件名，那么你可以找到它。我只在Firefox中测试过以下函数。

  function findMe(tag, attr, file) {
    var tags = document.getElementsByTagName(tag);
    var r = new RegExp(file + '$');
    for (var i = 0;i < tags.length;i++) {
      if (r.exec(tags[i][attr])) {
        return tags[i][attr];
      }
    }
  };
  var element = findMe('script', 'src', 'scripts.js');

- Travis Tidwell · Answer 4

我发现以下代码最具一致性、高效性和简洁性。

var scripts = document.getElementsByTagName('script');
var thisScript = null;
var i = scripts.length;
while (i--) {
  if (scripts[i].src && (scripts[i].src.indexOf('yourscript.js') !== -1)) {
    thisScript = scripts[i];
    break;
  }
}
console.log(thisScript);