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

当前回答

这是一个利用文档的填充程序。如果存在CurrentScript,则返回到按ID查找脚本。

<script id="uniqueScriptId">
    (function () {
        var thisScript = document.CurrentScript || document.getElementByID('uniqueScriptId');

        // your code referencing thisScript here
    ());
</script>

如果您在每个脚本标记的顶部包含这个,我相信您将能够始终如一地知道哪个脚本标记正在被触发,并且您还能够在异步回调的上下文中引用脚本标记。

未经测试,所以如果你尝试了,给别人留下反馈。

其他回答

它必须工作在页面加载和当一个脚本标签添加javascript(例如,与ajax)

<script id="currentScript">
var $this = document.getElementById("currentScript");
$this.setAttribute("id","");
//...
</script>

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

我用这个通常的eval替代方法动态地插入脚本标记,并在添加到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下一段。例如,将setTimeout链接起来,而不是在循环中在一行中多次调用setTimeout。

这是一个利用文档的填充程序。如果存在CurrentScript,则返回到按ID查找脚本。

<script id="uniqueScriptId">
    (function () {
        var thisScript = document.CurrentScript || document.getElementByID('uniqueScriptId');

        // your code referencing thisScript here
    ());
</script>

如果您在每个脚本标记的顶部包含这个,我相信您将能够始终如一地知道哪个脚本标记正在被触发,并且您还能够在异步回调的上下文中引用脚本标记。

未经测试,所以如果你尝试了,给别人留下反馈。

我有这个,它在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 );
}