Question

如何区分使用src属性包含的动态加载脚本和普通脚本？例如

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="static.js" type="text/javascript"></script>
  <script type="text/javascript">
  document.getElementsByTagName('head')[0].appendChild(document.createElement('script').src = 'dynamic.js');
  </script>
</head>
<body>
<script type="text/javascript">
// I want to distinguish dynamic.js and static.js script tags
</script>
</body>
</html>

Answer 1

为动态脚本添加特定的HTML5 data-*属性：

var script = document.createElement("script");
script.setAttribute("data-is-dynamic", "true");
script.id = "script1";
script.src = "dynamic.js";
document.getElementsByTagName('head')[0].appendChild(script);

获取<head>元素的选项是使用document.head，但旧浏览器不支持此选项。这是MDN文档 - https://developer.mozilla.org/en-US/docs/DOM/document.head

然后要区分，请使用：

var someScript = document.getElementById("script1"); // or any script tag you want to analyze
if (someScript.getAttribute("data-is-dynamic") === "true") {
    // is dynamic
} else {
    // is static
}

当然，与此同时，您可以在静态脚本标记上设置属性，例如data-is-static，然后以相反的方式检查它。

这允许您在脚本标记上有效设置“标记”，以便稍后检索。

如何区分动态加载脚本和普通src脚本

1 个答案: