我将如何将 JSON 数据嵌入到我的 HTML 文件中？答案

【问题标题】：How would I go about embedding JSON data into my HTML file?我将如何将 JSON 数据嵌入到我的 HTML 文件中？
【发布时间】：2018-11-30 10:45:33
【问题描述】：

我目前正在开展一个项目，我正在创建一个我想上传到 Facebook 的可播放广告。

根据 Facebook 的广告规范：(https://www.facebook.com/business/help/412951382532338?helpref=faq_content) 他们只接受一个小于 2mb 的 HTML 文件进行上传。这意味着我需要将所有外部引用内联到单个 HTML 文件。这让我想到了我的问题：为了加快开发速度，我使用 PlayCanvas 和 Phaser Editor 等游戏引擎。我面临的大多数游戏引擎的问题是它们总是将数据存储在 JSON 文件中，这使得很难将其引用到 HTML 文件中。有什么方法可以将这些数据也内联到我的文件中？

包含 base64 编码图像的 JSON 数据：

"section": [{
    "type": "image",
    "key": "logo",
    "url": "data:image/png;base64,iVBORw0KGgoAAAANSUhEn.........",
   "overwrite": false
  }],
  "meta": {
    "generated": "1543491968969",
    "app": "Phaser Editor",
    "url": "http://phasereditor.boniatillo.com",
    "version": "1.0",
    "copyright": "Arian Fornaris (c) 2015,2016"
  }
}

在我的 HTML 文件中引用此数据的函数：

Level.prototype.preload = function () 
  {
    this.load.pack('section', 'assets/pack.json');
  };

有没有办法可以将 JSON 文件中的引用数据加载到此函数中？我试过使用

<script id="data" type="application/json">
    {
        JSON data here
    }
</script>

然后在大括号内内联代码。用此代码替换“assets/pack.json”。我也尝试用相应的 JSON 数据替换“部分”，但我没有成功。我希望有人能理解这个函数的工作原理以及如何将这些数据内联。

我也很好奇是否有任何游戏引擎或软件可以输出可以在我的开发中使用的单个 HTML 文件。

我要提前感谢大家，感谢任何帮助解决这个问题。

【问题讨论】：

标签： javascript json html base64

【解决方案1】：

我认为您可以通过创建一个隐藏的 HTML 字段并将其数据设置为这样的对象来实现这一点。

<div data-foobar='{"foo":"bar"}'></div>

查看此链接：

http://jsfiddle.net/GlauberRocha/Q6kKU/

【讨论】：