动机:https://stackoverflow.com/questions/28120689/create-self-modifying-html-page-on-box
错误:字符串转义,格式化html
,js
由初始修改后生成,已保存html
,js
例如,
a)如果打开" saveFile.html"在本地浏览器;
b)输入" abc"进入textarea
;
c)点击save file
按钮;
d)点击Save
对话框中的Save File
;
e)file-*[date according to universal time].html
保存到磁盘;
f)在浏览器中打开file-*[date according to universal time].html
;
textarea
;
h)重复d),e),f);
i)错误:第二个file-*[date according to universal time].html
的结果显示textarea
包含" abc def"文字内容; 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>');"
&#34; saveFile.html&#34; 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>
答案 0 :(得分:1)
替换功能将替换为/textarea>
变量中的clone
。它不是从第一个文件中执行的,因为在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>"];
答案 1 :(得分:1)
我不确定是什么打破了第三代克隆,因此导致js信息输出到页面,但使用实际文档对象来克隆/操作原始文件可能会更好并将其内容输出为Blob
对象的字符串。例如,我使用您的基本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"});
我看到的唯一缺点是:
这可能很难扩展到更通用的框架,用于生成&#34;实时HTML文件&#34;加载HTML页面的当前状态(尽管它不应该比您的示例方法更复杂)。
clone.documentElement.outerHTML
返回的字符串似乎将文档类型声明放到一个简单元素中,以便:
不在输出字符串中。你可以使用类似的东西:
var clone_string = ["<!doctype html>" + clone.documentElement.outerHTML];
作为解决方法。或者,对于更强大的东西:
var doc_doctype = new XMLSerializer().serializeToString(document.doctype);
var clone_string = [doc_doctype + clone.documentElement.outerHTML];