Question

我将javascript代码注入用户当前正在查看的页面，在用户命令上此脚本进行DOM更改。在此交互结束时，用户可能希望保存页面，以便他/她以后可以查看/编辑它。我记得用户做的DOM更改，但是如果原始页面（在其源头）发生了变化，我将无法为用户恢复此页面。这就是为什么我想将更改的页面发送到我的服务器。我应该能够完全恢复它，页面的行为应该与它完全一样（包括脚本和媒体）。

此外我无法在我的终端存储用户页面的媒体（资源限制），所以我想我必须在各种脚本中解析和修改媒体到全局URL / URI的所有地址/引用/链接（HTML / CSS /的JavaScript）。

现在的问题是，是否有一个库/框架/ jquery扩展可以帮助我实现这个目标？

否则，正确/专业的方式是什么？

Answer 1

由于您使用的是jQuery，因此可以尝试$("html").html();，只需确保在再次输出时添加相应的<html>标记。

Answer 2

$('body').html()
$('head').html()
$('html').html()

下载firebug，并在此页面的控制台窗口中尝试。我得到了正确的数据。

Answer 3

我是否正确构建某种CMS，让用户在Contenteditable模式下编辑整个页面（不仅仅是单独的内容块）？

我肯定会建议寻找像ckeditor / tinymce等解决方案......因为自己做这件事会是一种可怕的痛苦。

Answer 4

@Sydenam的答案应该可以正常保存整个HTML页面。

与此同时，这是重要，我建议您在此处考虑潜在的安全问题。实际上，用户可以在DOM中注入他想要的任何东西并保存它，例如，在远程服务器上发送机密信息的讨厌的Javascript函数。

因此，在我看来，这样做的一种专业方法是将DOM的 PART 仅用于该用法，假设您可以使用a <div id='editable_div'>加载$（'＃editable_div'）。load（'your_url'，参数等等），然后使用另一个AJAX调用保存。

保存时，您可以解析这一部分HTML并使用一些正则表达式（如标签）确保内部没有任何令人讨厌的内容。

希望它有所帮助，

此致

如何使用javascript捕获完整的网页

4 个答案: