Question

我想确定是否通过从页面或标签管理器调用显式来加载Javascripts。

以下代码可用于列出页面正在运行的Javascripts

$("script[src]").each(function( i, src ) 
{  
       console.info($(this).attr('src'));  
});

以下脚本是标记管理器的示例：

www.googletagmanager.com/gtm.js?id=GTM-TM2FVV7
d3c3cq33003psk.cloudfront.net/opentag-136914-2122355.js

我如何确定标签管理器服务提供哪些脚本以及哪些脚本在页面中显式调用？

我考虑手动浏览HTML源代码并注意显式调用哪些脚本。但问题是，我如何知道哪个标记管理器调用了哪些脚本。

Answer 1

您可以使用MutationObserver“监听” DOM树中发生的更改。对于您而言，您对添加到页面中的<script>个节点感兴趣。

这是概念证明：

初始页面包含<script src="http://example.com/internal.js"></script>，因此不应将其视为外部脚本。
dropScript函数可模拟您的标记管理器：它将在页面上放置一个外部<script>，我们将对其进行跟踪。
每次DOM发生更改时，都会执行观察者回调。在这种情况下，我只会对<script>个元素的添加感兴趣。
1s之后，我将到目前为止检测到的所有外部脚本转储到控制台。

const dropScript = (src) => {
  setTimeout(() => {
    document.body.appendChild(
      document.createElement('script'))
        .src = src;
    console.log(`dropped ${src} on the page`);
  }, 500);
};

const externalScript = [];

const observer = new MutationObserver((mutations) => {
  for (let mutation of mutations) {
    mutation.addedNodes.forEach((node) => {
      if (node.nodeName.toLowerCase() === 'script') {
        externalScript.push(
          node.getAttribute('src'));
      }
    });
  }
});

observer.observe(document.body, { childList: true });

dropScript('http://example.com/external_1.js');
dropScript('http://example.com/external_2.js');
dropScript('http://example.com/external_3.js');

setTimeout(() => {
  console.log(externalScript);
}, 1000);

<script src="http://example.com/internal.js"></script>

来自tagmanager的Javascripts

1 个答案: