☰

使用 AJAX 请求获取页面的当前 HTML

tag-icon • tag-icon google-chrome screen-scraping
使用 AJAX 请求获取页面的当前 HTML

因此，我使用的是 Chrome/Chromium 浏览器（如果需要的话也可以使用 Firefox）。

我正在浏览使用（大概是）AJAX“即时”构建的网页（想想你在 Facebook 上向下滚动时东西会不断出现）。

我想在加载一堆内容之后保存此类页面的 html，但这不会显示在 Chromium 开发者工具的 DOM 中，并且右键单击保存只会保存原始页面，在 AJAX 加载内容之前。

我能做些什么？

答案1

获取包含所有动态加载元素的源代码的一种方法是通过 Chrome 开发者工具 ( F12)。选择<HTML>页面最开始的标签，然后复制元素 ( CTRL+ C)。这还会将所有包含的数据（动态加载或其他）复制到剪贴板，然后您可以将其粘贴到任何您想要的位置。

下面是展示该过程的 gif：

过程

明显的缺点是，如果您想要完整的网站，您将必须手动下载所有文件（.js、、.css图像）并将它们保存（提示：使用 Dev Tools 中的“源”选项卡）在与 html 文件相同的文件夹中，或者，如果您不介意从网络获取一些数据，请像这样修改 HTML 源中的链接：

===ORIGINAL===

<img src="file.jpg">

===MODIFIED===

<img src="[url_of_website_that_you_want_to_save]/file.jpg">

答案2

书签小工具

这是另一种方法，更简单！

保存以下 JavaScript 代码为书签小工具，然后在想要查看生成源的页面上点击它：

javascript:(function(){ function htmlEscape(s){s=s.replace(/&/g,'&amp;');s=s.replace(/>/g,'&gt;');s=s.replace(/</g,'&lt;');return s;} x=window.open(); x.document.write('<pre>' + htmlEscape('<html>\n' + document.documentElement.innerHTML + '\n</html>')); x.document.close(); })();

单击此处可使流程更简单！|JSFiddle

动图： rahuldottech！

相关内容