使用 JavaScript 访问 html 文件中内联 <script> 标记内的变量

Question

<script async src="https://www.googletagmanager.com/gtag/js?id=<key here>"></script>
<script>
    const container = document.getElementById('app');
    const key = container.getAttribute('secret-key');
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', key);
</script>

我正在尝试访问我需要在 <script> 标签内添加 Google Analytics 的密钥。我能够在第二个代码块中使用

const container = document.getElementById('app');
const key = container.getAttribute('secret-key');

我想对第一个 <script> 子句使用相同的键，但我不确定是否可以对内联 <script> 做同样的事情？我想使用相同的 const key 来替换 <key here>.

我怎样才能做到这一点？

编辑

<script>
    function appendGAScriptTag() {
        const configKeys = JSON.parse(container.getAttribute('data-bootstrap')).common.conf;
        const gaKey = configKeys['GOOGLE_ANALYTICS_KEY'];
        let gaScriptTag = document.createElement('script');
        gaScriptTag.type = 'text/javascript';
        gaScriptTag.async = true;
        gaScriptTag.src = `https://www.googletagmanager.com/gtag/js?id=${gaKey}`;
        document.getElementsByTagName('head')[0].appendChild(gaScriptTag);
    }
    appendGAScriptTag(); // <--- calling it here
</script>

Answer 1

您可以动态创建 <script> 标签，使用... 更多 JavaScript!

function appendGAScriptTag() {
  var gaScriptTag = document.createElement('script');
  gaScriptTag.type = 'text/javascript';
  gaScriptTag.async = true;
  gaScriptTag.src = `https://www.googletagmanager.com/gtag/js?id=${document.getElementById('app').getAttribute('secret-key')}`;
  document.getElementsByTagName('head')[0].appendChild(gaScriptTag);
}

当您想将生成的元素注入到 DOM 中时，在您现有的 JavaScript 代码中调用 appendGAScriptTag()。

使用 JavaScript 访问 html 文件中内联 <script> 标记内的变量

Accessing a variable inside an inline <script> tag in an html file with JavaScript

html

javascript

google-analytics