在我的一个HTML文件的顶部有这样一行：
<script src="//maps.google.com/maps/api/js?key=apikey"></script>
此 API 密钥目前已硬编码到文件中，我想改用在其他地方的.cfg文件中定义的配置选项。但是，我无法将任何类型的变量放入脚本元素的 src 属性中。
我试过：
<script>
document.createElement('script')).src='//maps.google.com/maps/api/js?key=apikeybutvariable';
</script>
和
<script>
$('<script>').attr({
src: '//maps.google.com/maps/api/js?key=apikeybutvariable',
type: 'text/javascript'}).appendTo('body')
</script>
当我尝试其中任何一个时，下一个脚本元素都看不到谷歌地图 JS API 定义的内容。
这是怎么回事，我该如何解决？
如果您尝试在 JavaScript 文件中定义的功能之后立即使用它不起作用。它尚未加载。JavaScript 是同步的：对 DOM 的任何修改只有在代码完成后才由浏览器执行。这意味着只有在代码完成后才会加载文件，并且只有在加载文件后，您才能使用其中定义的内容。加载也需要时间，将其附加到正文意味着它在最后加载，而您的其他代码在它之前。
使用现成的动态加载程序，或者将事件附加到脚本标记以在加载函数后调用函数。然后您知道它何时可以使用。
如果您的意思是无法从"下一个脚本"访问谷歌地图的 API。那么这就是您可以参考的答案。
Javascript脚本，无论是内联脚本还是外部脚本(如谷歌地图API(，它们通常按照它们在html文档中放置的顺序执行。顺序并不总是重要的，但当存在依赖关系时，顺序确实如此。如果这是代码中的问题，您必须这样做以确保在谷歌地图脚本加载并执行后实际执行"下一个脚本"。你可以采取很多方法来实现这一目标，例如导出一个在"下一个脚本"中启动代码的初始化函数，并在收到 DOMContentLoaded 事件时调用该函数。
尝试外部脚本元素.. 它对我有用
.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet"/>
</head>
<body>
<script>
// Create a request variable and assign a new XMLHttpRequest object to it.
var request = new XMLHttpRequest()
// Open a new connection, using the GET request on the URL endpoint
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true)
request.onload = function() {
// Begin accessing JSON data here
}
// Send request
request.send()
</script>
</body>