Javascript 创建一个独立的、离线的HTML5应用程序以及嵌入其资源的最佳方法

Javascript 创建一个独立的、离线的HTML5应用程序以及嵌入其资源的最佳方法,javascript,html,base64,offline,Javascript,Html,Base64,Offline,我正在尝试创建一个可以通过电子邮件发送给人们的HTML5文档,其中包含运行它所需的所有标记、js、css和图像 我知道有一些文章描述了离线过程,例如,但是我想知道嵌入其资源(如大型图像和js文件)的最佳方法 我会使用base64编码还是有更好的方法 应用程序将在全新的浏览器上运行。是的,base64将对图像进行编码。我要做的是将它们保存为png,并在转换为base64之前保存到正确的大小(有免费的在线网站可以为您这样做)。这节省了很多空间 要将数据保存到localfile,请使用HTML5本地存

我正在尝试创建一个可以通过电子邮件发送给人们的HTML5文档,其中包含运行它所需的所有标记、js、css和图像

我知道有一些文章描述了离线过程,例如,但是我想知道嵌入其资源(如大型图像和js文件)的最佳方法

我会使用base64编码还是有更好的方法


应用程序将在全新的浏览器上运行。

是的,base64将对图像进行编码。我要做的是将它们保存为png,并在转换为base64之前保存到正确的大小(有免费的在线网站可以为您这样做)。这节省了很多空间

要将数据保存到localfile,请使用HTML5本地存储,以下是指南:


对于JS/CSS文件,只需将它们粘贴到头部即可,没什么大不了的

为了一些工作,我不得不非常积极地这样做

为了显著减小文件大小,如果图形是线条艺术而不是照片,我更喜欢将其转换为可缩放的矢量图形文件(.svg)。这些文本文件现在被大多数浏览器自己理解,并且很容易直接嵌入到HTML文件中。根据您的需要,这里有一些选项,包括直接使用带有命令的标记来驱动它,或者将它作为样式表组件嵌入到文档体中任何需要的地方,使用数据URI(例如
.my_image{background:url(data:image/svg+xml;charset=UTF-8),[SVG文件不带换行符];}
,请在此处找到更详细的信息:)。请确保您在希望使用此功能的所有浏览器上进行测试…我已经能够在IE、Chrome、Firefox和Edge上成功地完成此操作,尽管我必须使用charset=US-ASCII并对SVG文本进行一些过滤以使其正常工作

对于字体,我使用Font Squirrel从我上传的字体文件生成webkit(使用高级选项,并将stylesheet.css设置为将字体嵌入其中,以便您可以将生成的文本复制到自己的页面)


如前所述,外部样式表和JavaScript可以直接复制到HTML中。

这是一个很老的问题,但对于其他人来说,这是一个完美的应用程序/扩展:

此外,您还可以使用任何浏览器用户代理字符串转换器加载页面的移动版本,然后将其保存到单个html文件(包含所有图像媒体css所有内容),该文件在智能手机上显示良好,您只需发送单个文件即可


如果你想从PDF而不是网页创建,那么你可以使用或这样的在线转换器,并选择1页HTML5选项。

老实说,我认为不可能创建“单个文件”网页。HTML、JS、CSS、图像等都是不同格式的不同文件,需要以不同的格式存储。您可以将所有内容压缩以分发它…但仍需要在最终目的地解压缩。@Charlie74@Jeffman,是的,根据其他注释,需要立即解压缩viewable@Pointy真有趣y从来没有想过做这样的事情…Base64编码实际上会使图像变大,但总的来说,你是对的,这就是方法。Pointy-是的,我的意思是png/正确大小可以节省空间。Base64是数据URI的标准方法。