从 JSON 配置文件加载到 HTML 文件中？答案

【问题标题】：Loading from a JSON configuration file into an HTML file?从 JSON 配置文件加载到 HTML 文件中？
【发布时间】：2016-12-30 16:05:07
【问题描述】：

我是 Javascript 新手，所以据我所知，我想要不可能的事情。

我的页面看起来像这样：

<html>
  <head>
    <meta charset="utf-8" />
    <script src="//static.foo.com/x/js/file1.js"></script>
    <script src="//static.foo.com/x/js/file2.js"></script>
    ...
    <script src="//static.foo.com/x/js/file10.js"></script>
  </head>
  <body>
    ...
  </body>
</html>

如您所见，我在同一个静态位置有许多包含的文件。其他人可能会以不同的方式使用 HTML 文件，其中他们包含来自不同静态位置的文件，所以我想介绍一个 config.json 文件，可以在其中指定这个和其他内容，例如：

{
  "streamingApiLocation": "//stream.something.com/",
  "staticAssetLocation": "//static.foo.com/x/", 
  "authApiLocation": "//auth.something.com/"
}

这会以某种方式加载到我的页面中，并且我的脚本包含如下：

    <script src="config.staticAssetLocation + js/file1.js"></script>
    <script src="config.staticAssetLocation + js/file2.js"></script>
    ...
    <script src="config.staticAssetLocation + js/file10.js"></script>

...这当然不是正确的语法...但基本上我正在寻找一种方法，根据 JSON 文件中提供的信息，在标题中的 script 标记中包含可变信息。

这样的事情还有可能吗？

【问题讨论】：

不可能这样。 src 不是 JavaScript 代码。这是一个URI。你可以有另一个脚本生成新的<script>标签并将它们插入到DOM中
看一个javascript框架，其中很多都有依赖管理，可以帮你处理这样的基本任务。我会推荐 angularJS 作为开始的好地方
看看这个answer它可能会有所帮助。
你应该只是连接和缩小你的文件，有很多库可以为你做到这一点，例如咕哝或咕哝
另外请记住，给定您的示例，您可能会遇到跨域限制。 stackoverflow.com/questions/9222822/…

标签： javascript html json

【解决方案1】：

您可以动态创建<script> 标签。

   var head= document.getElementsByTagName('head')[0];
   var script= document.createElement('script');
   script.type= 'text/javascript';
   script.src= 'helper.js';
   head.appendChild(script);

参考：http://unixpapa.com/js/dyna.html

【讨论】：

如果动态添加的脚本标签托管在源域外部的资源上，这将无法正常工作。
谢谢。这回答了如何动态制作脚本标签，但是我如何将配置文件加载到页面中？