如何在应用所有样式并删除javascript的情况下捕获运行时html内容/状态

How to capture the runtime html content/state with all styles applied and javascript removed

本文关键字：情况下 运行时 html 状态 内容 javascript 应用 删除 样式      更新时间：2023-09-26

问题的较短版本

是否有任何方法可以捕获运行时html（dom的当前状态）以及动态（ajax/javascript）网页的所有应用/内联样式？

更长版本

我想做的是将dom的当前状态保存为单个html页面，所有样式要么封装在应用的<style>标记中，要么内联样式。

类似地，我需要的是一些类似于coredump文件（它给出了应用程序的当前状态）的东西，但在本例中是一个（html）文件，可以加载到borwser中进行查看/调试。

如果页面中没有javascript，这个任务将非常容易。

  • 从web浏览器执行File->Save Page As -> html complete
  • 或者使用以下工具http://www.httrack.com或卷曲以下载页面和所有链接的图像

以下列出了在高级中可以用程序做同样的事情（尽管不是完整的解决方案）

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

但是，当使用javascript构建页面时，或者如果页面的状态在加载/点击时发生了变化，比如一些元素被隐藏，页面的布局发生了改变，则不能使用上述方法。

那么，如何保存（启用动态javascript）网页的当前状态呢？

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

所以我假设你想在桌面上做这件事？然后我会使用一个首选的无头浏览器，比如phantomjs，并禁用跨站点脚本。编写javascript，将您的目标URL加载到iframe中，获取其dom并将其保存到文件中。您仍然需要手动保存所有CSS，不确定如何内联。

关于如何获取DOM的当前状态。

您可以使用jQuery的.html（）来获取当前DOM。

var DOMState = $('html').html();

您可以编写一个bookmarklet来注入jquery（请参阅http://blog.reybango.com/2010/09/02/how-to-easily-inject-jquery-into-any-web-page/例如），然后捕获html。

相关文章：