如何捕获运行时html内容/状态,应用所有样式并删除javascript

Question

更短版本的问题

有没有办法捕获运行时html(当前状态的dom)与所有样式应用/内联动态(ajax/javascript)网页？

---

更长的版本

我想要做的是将当前dom状态保存为单个html页面,所有样式都包含在<style>应用的标签中或内联样式.

类似地,我需要的是一些类似于coredump文件(它提供当前应用程序状态)的东西,但在这种情况下是一个(html)文件,可以加载到borwser中进行查看/调试.

如果页面中没有javascript,则此任务非常简单.

• 不要File->Save Page As -> html complete从Web浏览器
• 或者使用http://www.httrack.com或curl 等工具下载页面和所有链接的图像

下面以高级别列出了以编程方式执行相同操作的方法(尽管不是完整的解决方案)

• 获取HTML内容
• 从onclick中删除所有标签和onXXX属性
• 获取*.css内容
• 在内部嵌入CSS样式 <style>
• 将所有图像路径更改为相对
• 保存所有图像

但是当javascript用于构建页面或者如果页面状态在加载/单击时被更改,就像某些元素被隐藏并且页面布局被更改,则无法使用上述方法.

那么如何保存(启用动态javascript)网页的当前状态？

如果存在这样的方法/工具/插件,那么通过电子邮件/与无法访问互联网或Web应用程序的人共享页面将非常方便

Answer 1

所以我假设您想在桌面上执行此操作？然后我会使用无头浏览器，例如 phantomjs，并禁用跨站点脚本。编写 javascript，将目标 URL 加载到 iframe 中，获取其 dom 并将其保存到文件中。您仍然需要手动保存所有 CSS，不知道如何内联它。