动态改变 <script> 标签 src答案

【问题标题】：Dynamically change the <script> tag src动态改变 <script> 标签 src
【发布时间】：2019-09-29 14:48:27
【问题描述】：

动态改变src标签

我正在将 Google 分析集成到我的 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标签没有变化。

【问题讨论】：

标签： javascript google-analytics

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

&lt;script src='https://some_source' id="analytics"&gt;&lt;/script&gt;

为什么你的方法不起作用

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

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

但是，模板文字在 Javascript 中工作，而不是在 HTML 中（至少据我所知不是）。此外，模板文字包含在反引号 (`) 中，而不是双引号 (")！

【讨论】：