如何在 HTML src 標簽中使用 JavaScript 變量

Question

我的 HTML 中有一個 src 標簽，其中包括一個私有 API 密鑰。 我不想使用 HTML 中的密鑰，所以我制作了一個 config.js 文件，以便可以從那里引用它。

<script src="main.js"></script>
<script src="config.js"></script>

var token = '12345'

后來，我必須在 URL 中引用密鑰，然后我嘗試這樣做：

<script async defer
  src=`https://maps.googleapis.com/maps/api/js?key=${token}&callback=initMap`>
 </script>

URL 帶有紅色下划線，但沒有顯示錯誤消息。 我想知道我將如何 go 這樣做。 謝謝！

Answer 1

在 javascript 和 append 中創建一個 html 元素到頭部 Index.ZFC35FDC70D5FC69D2539883A8EZCA8227：

<script defer src="scriptTagConfig.js"></script>

scriptTagConfig.js：

//Create element
const apiScriptTag = document.createElement("script")

//Set src attribute
apiScriptTag.setAttribute("src",`https://maps.googleapis.com/maps/api/js?key=${token}&callback=initMap`)

//Append to DOM
document.head.appendChild(apiScriptTag)

Answer 2

獲得令牌后，在 JavaScript 中動態構造<script>標記。

const script = document.body.appendChild(document.createElement('script'));
script.src = `https://maps.googleapis.com/maps/api/js?key=${token}&callback=initMap`;