我希望可以在与HTML页面交互后保存其状态。比如我点击了复选框，或者JavaScript设置了不同元素的值。如何保存“JavaScript渲染”的页面呢？谢谢。
6个回答
48
在Chrome（以及显然是Firefox）中，有一个特殊的copy()方法，可以将渲染后的内容复制到剪贴板。然后，您可以通过将其粘贴到首选文本编辑器中来进行任何操作。
注意：我发现 Chrome 在方法运行后报告 undefined，但它似乎执行正确，剪贴板中的内容也是正确的。
https://developers.google.com/chrome-developer-tools/docs/commandline-api#copyobject
控制台示例：
copy(document.body.innerHTML);
注意：我发现 Chrome 在方法运行后报告 undefined，但它似乎执行正确，剪贴板中的内容也是正确的。
- Grant
7
26
应该就这样做，这可以获取整个页面而不仅是正文。
console.log(document.getElementsByTagName('html')[0].innerHTML);
- GillesC
5
1这可能更好，但问题仍然是保存它。它可能需要一个书签小工具，不是吗？ - user420667
取决于您想要保存的位置，您可以将其分配给一个变量，执行 AJAX 调用并将其保存在数据库中或作为文件。 - GillesC
2但是这需要我将我的脚本注入到页面中，是吗？ - user420667
不，你可以将其保存为字符串，或者如果必须将其保存为DOM元素，则可以创建一个文档片段或另一个元素来存储它，然后即使它没有“注入”到您的页面中，您也可以像正常情况下遍历它。因此，您可以在理论上抓取整个页面，删除它，重新绘制一个并带回您拥有的任何旧页面。但是从跨浏览器的角度来看可能会有问题。 - GillesC
@user420667，您可以通过获取查询字符串中的信息并通过服务器端呈现它们来实现。假设页面的URL类似于foo.com/sex=male&age=120&type=developer。这可能是不好的实践，但它对您有用，而且您不需要JavaScript。 - Anirudha Gupta
4
document.body.innerHTML 可以获取当前文档主体的 HTML 表示。但这并不一定包括所有 DOM 对象内部状态，因为 HTML 中包含对象的初始默认状态，不一定是它们实际改变到的状态。确保获取所有状态的唯一方法是列出您想要保存的状态列表，并实际通过编程方式获取该状态。关于如何保存的问题，您需要进一步描述您真正要解决的问题。- jfriend00
9
@user420667 - 保存它的目的是什么？你打算用保存的版本做什么？如果你告诉我们真正的最终目标，我们可以更好地帮助你。毕竟，如果你只是想再次查看它，截屏或打印页面可能是保存的最可靠方式。我通过在浏览器中执行“文件/另存为”来将我的数字收据保存到硬盘中。根据以后的需求，有很多不同的保存方式。 - jfriend00
重新加载它，我想。或者在HTML中填写表格，并将其转换为PDF。无论目的是什么，都有很多种方法。 - user420667
@user420667 - 没有通用的答案。这完全取决于您以后想要做什么。如果您只是想稍后查看它，那么只需使用文件/另存为或打印页面副本或截屏即可。如果您想以精确形式重新加载它，以便以后可以像从未关闭浏览器窗口一样与其交互，那么您可能无法做到这一点，因为您无法在站点的实际域上复制页面的确切JavaScript状态。 - jfriend00
文件/另存为不会保存当前填写的内容，对吧？ - user420667
@user420667 - 这要看情况。抱歉，正如我已经说了几次的那样，如果你不能确切地说明将来对保存版本的具体需求，我就无法再提供更多帮助了。 - jfriend00
显示剩余4条评论
3
要获取使用JavaScript呈现的等效于查看源代码，包括Doctype和HTML标记，请将以下命令复制到Chrome控制台：
console.log(new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML);
在 Chrome 控制台中，将鼠标悬停在输出结尾处，然后单击“复制链接”以复制到粘贴板。
- Shogo Yahagi
1
将以下内容复制到您的浏览器控制台（F12->控制台），将自动保存一个名为
rendered.html的文件到您的下载目录中：let link = document.createElement("a");
link.href = URL.createObjectURL(new Blob([document.getElementsByTagName('html')[0].innerHTML], { type: 'text/html' }));
link.download = "rendered.html";
link.click();
URL.revokeObjectURL(link.href);
- Marinos An
2
如果能根据保存的页面来命名
.html文件，那就太好了。为了确保重复性，文件名需要包含格式化的日期时间。 - Akito如果能根据保存的页面命名
.html文件，那就太好了。为了使其绝对可重复，文件名需要一个格式化的DateTime。 - Akito-1
Grant的解决方案是最精确的，但仍需要手动操作控制台。 为了方便地实现相同的结果，而不必操作控制台，您可以使用以下浏览器扩展。
用法
- 访问要从中复制呈现的HTML的网页。
- 在页面上任何位置右键单击。
- 按“将页面复制为HTML文本”。
- 您得到了与在控制台中执行
copy(document.body.innerHTML);时获取的相同文本。
- Akito
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
copy(document.documentElement.outerHTML);，你将获得整个 HTML 页面，包括<head>（除了DOCTYPE?声明）。 - Dee J. Doena