我该如何将JSON数据嵌入到HTML文件中?

时间:2018-11-30 10:45:34

标签: javascript html json html5 base64

我目前正在一个项目中,我正在创建一个可播放广告,我想将其上传到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文件。

在此先感谢大家,感谢您在解决此问题方面所提供的帮助。

1 个答案:

答案 0 :(得分:0)

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

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

查看此链接:

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