如何获取已加载脚本的列表，包括动态加载的脚本

Question

我正在尝试将某个脚本与页面上当前加载的脚本相匹配：

if($('script[src="' + sn + '"]').length == 0)
  $('head').append('<scr' + 'ipt src="' + sn +'"></scr' + 'ipt>');  

这有效，但仅适用于正常加载的脚本。

对于使用 javascript 注入的脚本，就像我的情况一样，它不起作用:(

显然，以这种方式加载的脚本在 DOM 中是不可见的，即使它们运行也是如此。

Answer 1

var isThere = false;
$("script").each(function() {
    if ($(this).attr("src") == sn) {
        isThere = true;  
        // this works also with injected scripts!!
    }
});
if (isThere === false) {
    $('head').append('<scr' + 'ipt src="' + sn +'"></scr' + 'ipt>');
}

Answer 2

不可能可靠地知道加载了哪些脚本元素，因为一旦加载并执行了脚本元素，就可以在对文档零影响的情况下将其删除。 此外，使用innerHTML属性插入的脚本元素不会被执行，因此它们的存在是没有意义的（或多或少）。

您所能做的就是获取文档中当前脚本元素的列表，您无法可靠地知道哪些已加载甚至执行。

Answer 3

为什么不测试脚本中是否存在某些内容（例如全局变量名称、全局对象或函数名称）。

if (!window.functionName) {
    // script holding functionName must not be present so load it dynamically
}

Answer 4

嘿，您可以使用 PerformanceAPI：

https://developer.mozilla.org/en-US/docs/Web/API/Performance/getEntries

Answer 5

您可以检查条目数组

const entries = performance.getEntries();

此条目包括属性

// entries[0];

{
  detail: null,
  duration: 1586,
  entryType: "measure",
  name: "Next.js-before-hydration",
  startTime: 0
}