编辑，保存，自修改HTML文档; 格式生成的HTML，JavaScript
动机： https : //stackoverflow.com/questions/28120689/create-self-modifying-html-page-on-box
错误：string转义，格式化的html ， js生成的初始编辑，保存html ， js
例如，
a）如果在本地浏览器打开“saveFile.html”
b）在textareainput“abc”
c）点击save filebutton;
d）点击Save File对话框;
e） file-*[date according to universal time].html保存到磁盘;
f）在浏览器中打开file-*[date according to universal time].html ;
g）在textareainput“def”
h）重复d），e），f）;
i）错误：导致在第二个file-*[date according to universal time].html显示包含“abc def”文本内容的textarea ; button 不显示在html ：
// at rendered `html` from second `file-*[date according to universal time].html` // `textarea` containing "abc def" displayed here , // `button` _not_ displayed ; following string displayed following `textarea`: ');"console.log(clone);var file = new Blob([clone], {'type':'text/html'});a.href = URL.createObjectURL(file);a.download = 'file-' + new Date().getTime() + '.html';a.click();};
在第26行生成“saveFile.html”
+ "var clone = '<!doctype html>'+ document.documentElement.outerHTML.replace(/<textarea>.*<.+textarea>/, '<textarea>'+document.getElementsByTagName('textarea')[0].value+'<\/textarea>');"
“saveFile.html”v 1.0.0
html，js
<!doctype html> <html> <!-- saveFile.html 1.0.0 2015 guest271314 edit, save `html` document --> <head> </head> <body> <textarea> </textarea> <button>save file</button> <script type="text/javascript"> var saveFile = document.getElementsByTagName("button")[0]; var input = document.getElementsByTagName("textarea")[0]; var a = document.createElement("a"); saveFile.onclick = function(e) { var clone = ["<!doctype html><head></head><body><textarea>" + input.value + "</textarea>" + "<button>save file</button>" + "<script type='text/javascript'>" + "var saveFile = document.getElementsByTagName('button')[0];" + "var input = document.getElementsByTagName('textarea')[0];" + "var a = document.createElement('a');" + "saveFile.onclick = function(e) {" + "var clone = '<!doctype html>'+ document.documentElement.outerHTML.replace(/<textarea>.*<.+textarea>/, '<textarea>'+document.getElementsByTagName('textarea')[0].value+'<\/textarea>');" + "console.log(clone);" + "var file = new Blob([clone], {'type':'text/html'});" + "a.href = URL.createObjectURL(file);" + "a.download = 'file-' + new Date().getTime() + '.html';" + "a.click();" + "};" + "</scr"+"ipt>" + "</body>" + "</html>"]; var file = new Blob([clone], {"type":"text/html"}); a.href = URL.createObjectURL(file); a.download = "file-" + new Date().getTime() + ".html"; a.click(); }; </script> </body> </html>
你的replace函数replace直到你的clonevariables中的/textarea> 。 它不会从第一个文件中执行，因为html中textarea之后有一个换行符。 解决这个问题的一个方法是在生成的html中添加一个newline 。 喜欢这个：
var clone = ["<!doctype html><head></head><body><textarea>" + input.value // add newline here + "</textarea>\n" + "<button>save file</button>" + "<script type='text/javascript'>" + "var saveFile = document.getElementsByTagName('button')[0];" + "var input = document.getElementsByTagName('textarea')[0];" + "var a = document.createElement('a');" + "saveFile.onclick = function(e) {" + "var clone = '<!doctype html>'+ document.documentElement.outerHTML.replace(/<textarea>.*<.+textarea>/, '<textarea>'+document.getElementsByTagName('textarea')[0].value+'<\/textarea>');" + "console.log(clone);" + "var file = new Blob([clone], {'type':'text/html'});" + "a.href = URL.createObjectURL(file);" + "a.download = 'file-' + new Date().getTime() + '.html';" + "a.click();" + "};" + "</scr"+"ipt>" + "</body>" + "</html>"];
我不确定什么是打破第三代克隆，以便它导致js信息被输出到页面，但它可能会更好地使用实际的文档对象来克隆/处理原件，并输出其内容为Blob对象的string。 例如，我testing使用您的基地saveFile.html与以下更改：
//remove original clone var and replace with: var clone = document.cloneNode(true); // grab textarea elements from both original document and clone: var doc_input = document.getElementsByTagName("textarea")[0]; var clone_input = clone.getElementsByTagName("textarea")[0]; // set clone textarea's innerHTML to current textarea value: clone_input.innerHTML = doc_input.value; // use outerHTML of clone.documentElement to get string for Blob var clone_string = [clone.documentElement.outerHTML]; var file = new Blob([clone_string], {"type":"text/html"});
我所看到的唯一缺点是：
-
这可能很难扩展到一个更加通用的框架，用于生成加载HTML页面当前状态的“活动HTML文件”（尽pipe它不应该比您的示例方法更复杂）。
-
由
clone.documentElement.outerHTML返回的string似乎将文档types声明放到一个简单元素中，以便：
不在输出string中。 你可以使用像这样的东西：
var clone_string = ["<!doctype html>" + clone.documentElement.outerHTML];
作为解决方法。 或者，对于更强大的东西：
var doc_doctype = new XMLSerializer().serializeToString(document.doctype); var clone_string = [doc_doctype + clone.documentElement.outerHTML];
