为特定的JS文件挂钩Javascript Onload

Question

经过大量的故障排除后，我发现我的ga()命令在我的Shopify商店中加载Google Analytics之前运行失败。我找到了一个示例代码片段，据说在GA加载之前会延迟命令，但它使用的是我的网站不使用的JQuery。

<script>
  $(window).ready(function() {
    $('head script[async][src*="analytics"]').on('load', function() {
      ga('set', 'dimension1', 'insert_value');
      ga('set', 'dimension2', 'insert_value');
      ga('set', 'dimension3', 'insert_value');
    });
  });
</script>

我正在研究如何将其转换为纯Javascript，我想我可以使用addEventListener（）等到它加载而不是正面。应该使用哪些函数来加载另一个Javascript文件？

Answer 1

你是在正确的轨道上，我想你的事件似乎没有被解雇，因为你有一些加载顺序的问题（即在你注册处理程序之前被触发的事件）。以下内容应涵盖该案例。唯一的要求是在触发DOMContentLoaded之前插入脚本标记本身。

document.addEventListener("DOMContentLoaded", function() {
  const loaded = function() {
    console.log("Script loaded");
  }
  if (ga !== undefined) {
   loaded()
  } else {
   document.querySelector('script[async][src*="analytics"]').addEventListener("load", loaded);
  }
});

<script src="https://www.google-analytics.com/analytics.js" async="true"></script>