来自tagmanager的Javascripts

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>节点。

这是一个概念的证明：

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

​

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>

​