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

Question

我目前正在开展一个项目，我正在创建一个可上传的广告，我想上传到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数据替换'section'，但我没有成功。我希望有人可以理解这个函数是如何工作的，以及如何在那里内联这些数据。

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

我想提前感谢所有人，感谢您解决这个问题。

Answer 1

我认为你可以通过创建一个隐藏的HTML字段并将其设置为数据来实现这一目标。

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

看看这个链接：

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