Question

动态更改src标签

我正在将Google Analytics（分析）集成到我的Angular应用中。它需要在script-src及更高版本中添加google tracking id。首先需要加载。

虽然对于一个环境它可以正常工作，但我想针对不同的环境使用不同的ID。

我正在尝试类似的事情：

<script>
    var googleTrackingId;
      switch (window.location.hostname) {
          case 'mycompany.com':
            googleTrackingId = 'UA-123123-3'; // production
              break;
          case 'staging.mycompany.com':
            googleTrackingId = 'UA-123123-2'; // staging
              break;
          default:
            googleTrackingId = 'UA-123123-1'; // localhost
      }
  </script>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=${googleTrackingId}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', googleTrackingId);
  </script>

但是src标签没有改变。

Answer 1

您可以先根据主机名找到所需的跟踪ID，然后创建<script>标签。

<script>

    var googleTrackingId;
      switch (window.location.hostname) {
          case 'mycompany.com':
            googleTrackingId = 'UA-123123-3'; // production
              break;
          case 'staging.mycompany.com':
            googleTrackingId = 'UA-123123-2'; // staging
              break;
          default:
            googleTrackingId = 'UA-123123-1'; // localhost
      }

      document.write( '<scr' + 'ipt async src="https://www.googletagmanager.com/gtag/js?id=' + googleTrackingId + '"></scr' + 'ipt>' );

  </script>

  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', googleTrackingId);
  </script>

Answer 2

使用Javascript，您可以通过ID获取<script>元素，并将所需的内容附加到元素的src属性中。

编辑：您可以使用脚本的onload事件处理程序，在脚本元素加载后立即对其进行更改：

var analyticsScript = document.getElementById('analytics');
analyticsScript.onload = function() {
  analyticsScript.src += '?id=3wrwerf45r3t36y645y4';
  console.log(analyticsScript.src);
}

<script src='https://some_source' id="analytics"></script>

为什么您的方法行不通

在您的HTML代码中，您尝试在此处使用模板文字：

<script async src="https://www.googletagmanager.com/gtag/js?id=${googleTrackingId}"></script>

但是，模板文字只能在Javascript中工作，而不能在HTML中工作（至少据我所知）。另外，模板文字被包装在反引号（`）内，而不是双引号（“）！

动态更改<script>标记src

2 个答案:

为什么您的方法行不通