如何在 HTML src 标签中使用 JavaScript 变量

Question

I have a src tag in my HTML which includes a private API key. I didn't want to use the key in the HTML so I made a config.js file so I could reference it from there instead.

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

var token = '12345'

Later, I have to reference in key in the URL and I tried doing this:

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

The URL is underlined red, but shows no error message. I was wondering how I would go about doing this. Thanks!

Answer 1

Make an html element in javascript and append it to the head Index.html:

<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

Construct the <script> tag dynamically in JavaScript once you have the token.

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