我想保存一个包含 javascript 的网站（如果有帮助的话，该网站是 vyou.com；这里有一个链接Andrew WK 的用户页面（英文：user page）用于更新用户在网站上看到的内容。我想要做的是，一旦用户的视频答案链接列表完全展开，就保存网站。我不打算保存这些链接指向的视频，我只想保存我的浏览器的状态。我使用什么浏览器对我来说并不重要。
有谁做过类似的事情或知道如何实现这一点？
答案1
有（至少）两个原因导致您保存的文件看起来与您保存的实时网站不完全相同：
- 页面上的部分或大部分图片链接可能是“相对”链接。同样，页面上“.css”和“.js”文件的链接也可能是“相对”链接。
- 这些“.css”和“.js”文件中可以包含一些指向图像和其他文件的链接。
例如，假设你查看一个页面：
http://example.com/something/index.php
在该页面上，有一个指向图像文件的“相对”链接：
"../images/picture.jpg"
该页面上还有指向 .css 文件的“相对”链接：
"../css/style.css"
因此，当您保存页面的“.html”文件时，它包含这些“相对”链接。当您在浏览器中打开保存的页面时，它会在保存 .html 文件的文件夹中查找这些图像和 css 文件。如果这些图像和 css 文件不在您保存 .html 文件的文件夹中，则页面将无法正确显示。
您可以采取一些措施来“解决”这个问题。
- 选择
File-->Save as...-->Webpage, complete（或类似措辞）将网页保存到计算机时。这将在您的计算机上保存图像和 .css/.js 文件的副本，并修改已保存的 html 文件中的链接以指向计算机上的图像/文件。这不是“万无一失”的。似乎这个过程经常会“遗漏”一些文件。在这种情况下，您必须手动查找和下载丢失的文件，并手动编辑已保存的 html 文件中的链接以“指向”计算机上保存的文件。 - 将 html 文件保存为“Web 存档”文件（“.mht”）
在已保存的 html 文件副本中的部分中添加“base href...”行
<head>。以上述 URL 为例：http://example.com/something/index.php从网页 URL 中删除“index.php”可得到：
http://example.com/something/将其添加到网页已保存副本中的 <head> 部分，如下所示：
<头部> <base href="http://example.com/something/"> <...> <...> </head> ...
编辑（2013-04-04）：
使用 Internet Explorer，保存页面并保存页面上 JavaScript 的“结果”的最佳方法（可能不是完美的）是使用Microsoft 开发人员工具，然后查看并保存该页面的 DOM 源。
我说“也许不完美”......
假设您有一个网页，它使用 JavaScript“生成”向网页添加图像的 HTML 代码。
如果您在线查看网页，您将看到图像。如果您查看页面源代码（View-->Source）或将页面源代码保存到文件（File->Save as...），您将看到 JavaScript，但看不到 HTML<img...>代码。
现在，如果您使用开发人员工具查看并保存页面的 DOM 源，然后在文本编辑器中打开保存的文件，您将看到原始 JavaScript 包含在保存的文件中，然后在 JavaScript 下方，您将看到<img...>由 JavaScript 生成的代码。
然后，如果您在浏览器中打开已保存的页面，您将看到两次图像。这是因为当您打开已保存的页面时，JavaScript 将再次执行并生成显示图像的代码，而代码下方是已保存到文件的图像的 HTML 代码。
您可以通过编辑已保存的 DOM 源来“修复”此问题，然后删除（或注释掉）JavaScript。然后，当您在浏览器中打开已保存的页面时，您将只会看到一次图像。
编辑（2013-04-05）：
从浏览器中保存包含相对链接的网页似乎可能会引起一些混淆，因此我决定提供一个可行的示例。
以下是我为演示这一点而创建的网页：
瀑布灯塔图片
该页面的 HTML 代码如下：
<html>
<头部>
<title>瀑布和灯塔</title>
</head>
<主体>
<img src="../images/imagesCAIPHDL5.jpg" /><br />
<br /><hr align="left" width="284" /><br />
<script type="text/javascript">document.write("\n"+'<img src="../images/imagesCAG7M85E.jpg" /><br />');</script>
</主体>
</html>
如果您使用浏览器查看该页面（我使用的是 IE9），您将正确看到预期的网页，其中包含 2 张图片。
在查看页面时，您可以通过单击：View-->Source或单击 来 保存页面源代码File-->Save as...-->Webpage, HTML only。然后保存文件。无论哪种方式，您都会获得相同的 HTML 代码：
<html>
<头部>
<title>瀑布和灯塔</title>
</head>
<主体>
<img src="../images/imagesCAIPHDL5.jpg" /><br />
<br /><hr align="left" width="284" /><br />
<script type="text/javascript">document.write("\n"+'<img src="../images/imagesCAG7M85E.jpg" /><br />');</script>
</主体>
</html>
但是，如果您在浏览器中查看保存的文件，您将看到一个空白页，其中没有图片。这是因为保存的文件中的图像链接和 JavaScript 编写的图像链接都是“相对”链接……浏览器无法告诉在哪里可以找到图片的域或路径。您可以在此处看到它的样子：
查看源代码
仅限 HTML
如果您编辑此保存的文件并添加以下行：
<base href="http://viewthis.info/superuser577187/page/">
该文件将如下所示：
<html>
<头部>
<title>瀑布和灯塔</title>
<base href="http://viewthis.info/superuser577187/page/">
</head>
<主体>
<img src="../images/imagesCAIPHDL5.jpg" /><br />
<br /><hr align="left" width="284" /><br />
<script type="text/javascript">document.write("\n"+'<img src="../images/imagesCAG7M85E.jpg" /><br />');</script>
</主体>
</html>
现在，如果你查看編輯在浏览器中打开文件，您将看到一个页面，其中两张图片均正确显示。这是因为“base href”行告诉浏览器在哪里（域和路径）查找“丢失”的图片。您可以在此处看到它的样子：
带有基本 href 的来源
在线查看页面时，您还可以通过点击： 来保存页面源代码
File-->Save as...-->Webpage, complete。
如果您查看此已保存文件的源代码，您将看到以下 HTML 代码：
<!-- 从 url=(0042)http://viewthis.info/superuser577187/page/ 保存 -->
<html>
<头部>
<title>瀑布和灯塔</title>
<meta content="text/html; charset=windows-1252" http-equiv=Content-Type>
<meta name=GENERATOR content="MSHTML 9.00.8112.16470">
</head>
<主体>
<img src="瀑布和灯塔_files/imagesCAIPHDL5.jpg" /><br />
<br /><hr align=left width=284 /><br />
<script type=text/javascript>document.write("\n"+'<img src="../images/imagesCAG7M85E.jpg" /><br />');</script>
</主体>
</html>
如果您在浏览器中查看此保存的文件，您将看到一个页面，其中第一张图片（顶部）显示正确，但第二张图片未显示（缺失）。这是因为使用 保存时Webpage, complete，浏览器会在硬盘上保存第一张图片的副本，并修改保存文件中的链接以指向图片的本地副本。保存的文件中不存在第二张图片的图片链接。创建第二个图片链接的 JavaScript 代码保存在文件中，但实际链接不是页面源的一部分，因此第二个图片链接未保存，第二个图片文件也未保存。
再次，如果您编辑此保存的文件并添加以下行：
<base href="http://viewthis.info/superuser577187/page/">
然后查看編輯在浏览器中打开该文件，您将得到一个正确显示两张图片的页面。
在线查看页面时，您还可以通过单击来保存页面：
File-->Save as...-->Web Archive, single file-->Save。
如果您在浏览器中查看此保存的文件，您将看到一个页面，其中两张图片均正确显示。这是因为“存档”格式将第一张图片保存在存档文件中（编码），并保存网页（和域名/路径）和第二张图片文件所在的网址。
在所有这些示例中，JavaScript 的“结果”（处理 JavaScript 之后页面的当前状态），即第二个图像链接，都不包含在保存的文件中，只保存了 JavaScript。
请记住，在这些示例中，JavaScript 的“结果”非常“简单”，几乎是 JavaScript 的“微不足道”的使用。在“真实”网页中，JavaScript 可能非常复杂，并且可以生成许多页面（仅受可用内存量的限制）。
现在，如何使用 JavaScript 的“结果”保存页面。我们将使用 Microsoft Developer Tools 执行此操作（下载链接在此答案的前面显示）。
安装开发工具后，在线查看页面时按下F12键或单击：
Tools-->F12 Developer Tools
然后在打开的窗口中单击：
View-->Source-->DOM (page)。
打开新窗口。单击File-->Save，然后保存文件。
如果您查看此已保存文件的源代码，您将看到以下 HTML 代码：
<html>
<头部>
<title>瀑布和灯塔</title>
</head>
<主体>
<img src="../images/imagesCAIPHDL5.jpg" /><br />
<br /><hr 宽度="284" align="左" /><br />
<script 类型="text/javascript">
document.write("\n"+'<img src="../images/imagesCAG7M85E.jpg" /><br />');
</script>
<img src="../images/imagesCAG7M85E.jpg" /><br />
</主体>
</html>
注意在这个保存的文件的源代码中，你会看到 JavaScript 已被保存，而且 JavaScript 的“结果”也被保存了：
...
<script 类型="text/javascript">
document.write("\n"+'<img src="../images/imagesCAG7M85E.jpg" /><br />');
</script>
<img src="../images/imagesCAG7M85E.jpg" /><br />
...
我认为这就是你想要的。但是，有两个问题。
首先，和以前一样，如果您在浏览器中查看此保存的文件，您将看到一个空白页，没有图片。这是因为保存的文件中的图像链接是“相对”链接……浏览器无法告诉在哪里可以找到图片的域或路径。您可以在此处看到它的样子：
开发者工具-DOM
再次，如果您编辑此保存的文件并添加以下行：
<base href="http://viewthis.info/superuser577187/page/">
然后查看編輯在浏览器中打开文件，您将看到显示两张图片的页面。您可以在此处看到它的样子：
DevTools-DOM-带-base-href
这里你会注意到第二个问题。第一张图片（瀑布）显示正确（一次），但第二张图片（灯塔）显示两次。发生这种情况的原因是，当加载保存的页面时，JavaScript 再次执行，为第二张图片生成图片链接，并且第二张图片的图片链接也保存在文件中。
要修复此问题，您需要再次编辑保存的文件，并删除 JavaScript（删除<script...> and </script>标签以及它们之间的所有内容）。现在，編輯
文件如下所示：
<html> <头部> <title>瀑布和灯塔</title> <base href="http://viewthis.info/superuser577187/page/"> </head> <主体> <img src="../images/imagesCAIPHDL5.jpg" /><br /> <br /><hr 宽度="284" align="左" /><br /> <img src="../images/imagesCAG7M85E.jpg" /><br /> </主体> </html>
现在，保存的文件包含了你想要的 JavaScript 的“结果”，如果你查看編輯在浏览器中打开文件，您将看到一个页面，其中只有两张图片中的一张正确显示。您可以在此处看到它的样子：
DevTools-DOM-Final
现在，这一切看起来似乎非常复杂，但事实并非如此......
下载并安装开发人员工具后，只需 4 个相当简单的步骤...在浏览器中查看要保存的页面时：
- 按下
F12键或单击：Tools-->F12 Developer Tools - 在打开的窗口中，单击：
View-->Source-->DOM (page)。 - 在新窗口中，单击
File-->Save，然后保存文件。 - 编辑您保存的文件并添加“base href”行，然后删除
<script...> ... </script>
答案2
发现 Firefox 附加组件 Mozilla 存档格式 (http://maf.mozdev.org/) 具有忠实保存选项，可生成“有效 CSS”，并剥离<script>（它可以导出为 MHTML、MAFF、完整网页并在其中进行转换）。它用一些我需要的脚本完成了简单页面以 HTML 格式快照的工作。
答案3
使用 Firefox 时，您可以CTRL+A选择全部，右键单击屏幕并使用View source code of selection。您将看到显示的完整 HTML，其中包含运行时插入的元素和所有内容。从源代码窗口，您可以将此 HTML 保存到文件中。
还有萤火虫，一个强大的网站调试工具，允许您检查生成的 HTML 代码以获得类似的结果。
答案4
保存整个页面渲染后的 HTML
您可以使用书签小工具在浏览器引擎对 HTML 进行后期处理后，以编程方式保存最终 HTML：
javascript: (function () {
var a = document.createElement('a')
a.download = 'saved.html'
var bb = new Blob([document.body.innerHTML], { type: 'text/plain' })
a.href = window.URL.createObjectURL(bb)
document.body.appendChild(a)
a.click()
a.parentNode.removeChild(a)
})()
相同代码的最小化版本：
javascript:(function(){var a=document.createElement('a');a.download='saved.html';var bb=new Blob([document.body.innerHTML],{type:'text/plain'});a.href=window.URL.createObjectURL(bb);document.body.appendChild(a);a.click();a.parentNode.removeChild(a);})()
- 可实时编辑的书签保存 HTML （将
Drag me..链接拖到书签工具栏即可创建小书签）
用法
创建一个常规书签，编辑它并将上面的代码粘贴到 URL 字段中。确保javascript:它以您的浏览器在复制粘贴时可能会自动删除该前缀开始。
与 OOTB 文件 > 保存 HTML 不同，即使您断开了互联网连接，但浏览器中仍有该页面，此操作仍可行。此操作在（大多数）移动浏览器中也有效，这些浏览器没有像桌面浏览器那样提供保存 HTML 选项。
保存 iframe 渲染后的 HTML
如果您要保存的内容位于其中，<iframe>则上面的第一个书签将不包含该标记。
保存页面上第一个 iframe 的 HTML 的书签小程序。
javascript: (function () {
var a = document.createElement('a');
a.download = 'saved.html';
var iframe = document.getElementsByTagName('iframe')[0];
var markup = (iframe.contentDocument || iframe.contentWindow && iframe.contentWindow.document).documentElement.innerHTML;
var bb = new Blob([markup], { type: 'text/plain' });
a.href = window.URL.createObjectURL(bb);
document.body.appendChild(a);
a.click();
a.parentNode.removeChild(a);
})()
最小化：
javascript:(function(){var a=document.createElement('a');a.download='saved.html';var iframe=document.getElementsByTagName('iframe')[0];var markup=(iframe.contentDocument||iframe.contentWindow&&iframe.contentWindow.document).documentElement.innerHTML;var bb=new Blob([markup],{type:'text/plain'});a.href=window.URL.createObjectURL(bb);document.body.appendChild(a);a.click();a.parentNode.removeChild(a);})()
如果页面有多个 iframe，那么您需要使用document.getElementsByTagName('iframe')[0]更具体的选择器更改行，例如，document.getElementById('CUSTOM_IFRAME_ID')或者您可能需要循环遍历所有元素，以防document.getElementsByTagName('iframe')您想逐一保存它们。
- 可实时编辑的书签保存 HTML 框架（将
Drag me..链接拖到书签工具栏即可创建小书签）