如何保存动态更改（byjquery）html DOM？ [英] how to save dynamically changed ( byjquery ) html DOM?

问题描述

我使用jQuery动态表单获得了一些漂亮的布局生成器，jQuery UI功能可以更改已使用元素的数量，它们的CSS属性等等。一切看起来都很棒，但是呈现当前结果有一个问题。我想保存生成的HTML DOM并以某种方式解析它（从DOM树中删除隐藏的元素等）。任何想法如何保存当前（修改后的）html + css？

解决方案

使用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

第三步：

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

以前我已经试过了，它工作正常。希望它能为你和其他人工作。
该解决方案不需要任何服务器端技术，也不需要Flash，Java applet，Active-X控件，XPCOM或任何专有的客户端技术。唯一需要的是支持数据uris的任何（现代）浏览器。

I got some nice layout generator using jquery dynamic forms, and jquery ui features to change number of used elements, their css properties etc. Everything looks great but there is one problem with presentation of current result. I would like to save generated html DOM and parse it somehow ( delete hidden elements from DOM tree etc ). Any ideas how to save current (modified) html + css?

解决方案

Solution using jquery follows:

Step 1:

convert the whole (modified) html to a string representation:

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

Step 2:

Base64 encode the htmlString and put it into a datauri inside a hyperlink:

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

Note: I'm using this library for base64 encoding above: http://hpyer.cn/codes/jquery-plugin-base64-encode-and-decode

Step 3:

Right-click on the 'Save' link dynamically created above and choose "Save As" from the browser's context menu. Your modified html file will be saved as a new html document on your local filesystem.

I've tried this before and it works. Hope it will work for you and others as well. This solution works without any server-side technology, nor does it require Flash, Java applets, Active-X controls, XPCOM or any proprietary client-side technology. The only thing required is any (modern) browser that supports data-uris.

这篇关于如何保存动态更改（byjquery）html DOM？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！