如何保存动态更改(byjquery)html DOM？

Question

我使用jquery动态表单获得了一些不错的布局生成器,并且jquery ui功能可以更改已使用元素的数量,它们的css属性等.一切看起来都很棒但是当前结果的呈现存在一个问题.我想保存生成的html DOM并以某种方式解析它(从DOM树中删除隐藏的元素等).任何想法如何保存当前(修改)的html + css？

Answer 1

使用jquery的解决方案如下:

步骤1:

将整个(修改过的)html转换为字符串表示形式:

var html = $('html').clone();
var htmlString = html.html();

第2步:

Base64对htmlString进行编码并将其放入超链接内的数据库中:

var datauri = "data:text/html;charset=utf-8;base64," + $base64.encode(htmlString);
$("body").append("<a href='" + datauri + "'>Save</a>");

注意:我在上面使用这个库进行base64编码:http://hpyer.cn/codes/jquery-plugin-base64-encode-and-decode

第3步:

右键单击上面动态创建的"保存"链接,然后从浏览器的上下文菜单中选择"另存为".您修改的html文件将保存为本地文件系统上的新html文档.

我以前试过这个并且它有效.希望它对你和其他人也有用.此解决方案无需任何服务器端技术,也不需要Flash,Java小程序,Active-X控件,XPCOM或任何专有的客户端技术.唯一需要的是支持数据uris的任何(现代)浏览器.

Answer 2

作为第一步，您可以使用

var $alteredHtml = $('html').clone();
// use jQuery here to make alterations to the cloned html (parse it)

但要保存它，您将需要一些服务器端技术，将其保存到文件或数据库中。