我如何引用加载当前的脚本标记

 

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

我想要做的是引用加载当前脚本的脚本元素，以便随后将新动态加载的脚本标记追加到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

document.currentScript将返回当前正在处理其脚本的<script>元素。 

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

优点

  • 简单明了。 可靠。
  • 不需要修改脚本标签
  • 适用于异步脚本（ defer和async ）
  • 适用于动态插入的脚本

    • 问题

  • 在旧版浏览器和IE中无法使用。

    • 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属性支持得更少
  • 将绕过具有id边缘情况的<script> 。
  • 如果其他元素在页面上具有相同的数据属性和值，可能会感到困惑。

    • 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>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>

    优点

  • 简单。
  • 几乎得到普遍支持
  • 没有自定义属性或ID需要

    • 问题

  • 不适用于异步脚本（ defer和async ）
  • 不适用于动态插入的脚本

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

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

    可能最简单的做法是给你的脚本标签一个id属性。

    链接地址: http://www.djcxy.com/p/42491.html

    上一篇: How may I reference the script tag that loaded the currently

    下一篇: how to include javascript libraries in my own script