如何引用加载当前运行的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>

当前回答

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

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

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

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

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

其他回答

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

在脚本块中放入一些随机的唯一字符串(在每个脚本块中必须是唯一的/不同的) 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

由于脚本是按顺序执行的,因此当前执行的脚本标记始终是页面上的最后一个脚本标记。所以,要获得脚本标签,你可以这样做:

var scripts = document.getElementsByTagName( 'script' );
var thisScriptTag = scripts[ scripts.length - 1 ];

获取脚本,即当前加载的脚本可以使用

var thisScript = document.currentScript;

您需要在脚本的开头保留一个引用,以便稍后调用

var url = thisScript.src

我发现下面的代码是最一致、性能最好和最简单的。

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

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