3

我有一个包含大量 javascript 的页面。然而，页面一旦渲染仍然是静态的，没有移动的东西或特殊效果等......应该可以在没有任何 javascript 的情况下仅使用纯 HTML 和 CSS 渲染相同的 HTML。这正是我想要的——我想获得特定页面的无 javascript 版本。当然，我不希望有任何动态行为，所以例如，如果按钮死了，我就可以了。我只是想让它们渲染。

现在，我不想要图像。它需要是带有 CSS 的 HTML，可以嵌入 HTML，也可以。

我该怎么做？

编辑

我很抱歉，但我一定没有说清楚。我的网站使用 javascript，没有它就无法工作。我不想检查它是否可以正常工作，我知道它不会，我真的不在乎。这不是我要问的。我在询问一个特定的页面，我想将其作为纯 HTML + CSS 抓取。失去其动态性的事实并不重要。

编辑2

有一个建议是从 DOM 检查器中对 HTML 进行语法分析。这是我做的第一件事——在 Chrome 开发工具中，将根 html 元素复制为 HTML 并将其保存到文件中。当然，这是行不通的，因为它继续引用网络上的 CSS 文件。我想我应该提到我希望它在文件系统中工作。

接下来是使用某种“保存”菜单（取决于浏览器）将页面保存为完整的所有环境。它保存页面和所有相关文件，形成一个闭包，可以从文件系统打开。但是必须手动清理 html 中的所有 javascript - 乏味且容易出错。

编辑3

我似乎总是忘记一些事情。当然，应该保留图像。

4

1 回答 1

2

我必须半定期做类似的任务。到目前为止，我还没有找到一种自动化的方法，但这是我的工作流程：

  1. 在谷歌浏览器中打开页面（我想FireFox也有相关工具）；
  2. “将页面另存为”（完整页面），将 html 页面重命名为更好的名称，删除所有.js下载的脚本，将所有内容移动到单个文件夹中；
  3. 在原始页面上，打开 Elements 选项卡（DOM 检查器），查找并删除我知道会导致问题的所有标签（例如 Facebook“like”按钮）（我也尝试script在此阶段删除标签，因为它更容易）并复制为HTML（右键单击<html>标签。将其粘贴到（替换）下载的 HTML 文件中（记住保留DOCTYPE不被复制的；
  4. 在所有 HTML 文件中搜索任何剩余script部分并删除（也删除任何noscript内容），并搜索on（开头有空格但 StackOverflow 不会呈现它）以删除处理程序（onload,onclick等）；
  5. 搜索图像 ( src=, url()，查找图像文件名中的常见模式并使用正则表达式全局替换它们。例如src="/images/myimage.png"=> |/images/||。这需要应用于所有 HTML 和 CSS 文件。还要确保 CSS 文件具有正确的路径 ( href)。这样做时，我通常将所有href（链接）替换为#;
  6. 最后在浏览器中打开转换后的页面（实际上我倾向于尽早这样做，以便查看我所做的任何更改是否会导致它中断），使用控制台选项卡检查 404 错误（未下载的图像或有不同的名称）和网络选项卡以检查是否仍在从在线版本加载任何内容；
  7. 对于任何未下载的文件，我会返回原始页面并使用“资源”选项卡找到它们并手动下载；
  8. （可选）剔除任何不需要的内容（跟踪器图像/iframe、未使用的 CSS 等）。

这是一项大工作。我想要一个自动化所有这些的工具，但到目前为止我还没有找到一个。我下载的页面制作得很糟糕（商店），其中有很多不寻常的代码，所以这就是为什么有这么多步骤的原因。您可能不需要遵循每一步。

于 2013-04-07T13:31:53.453 回答