如何获取页面的源代码而不是当前内容？答案

【问题标题】：How to get source code of page not the current content?如何获取页面的源代码而不是当前内容？
【发布时间】：2015-11-12 04:43:31
【问题描述】：

我有一个带有属性value 的文本框的页面"Original Value"。让我们假设我已经加载它并在文本框中输入了“新值”。下面的两个例子都应该返回 -1（我在 Firefox 控制台中尝试过）。

// 1.
var wholecontento = "";
var wholecontento = document.documentElement.outerHTML;
alert(wholecontento.search("New Value"));

// 2.
var wholecontento = "";
var wholecontento = document.body.outerHTML;
alert(wholecontento.search("New Value"));

但它们都返回大于1 的整数。我该如何解决？

【问题讨论】：

向服务器执行第二个请求是否安全？
是的。这是安全的。但我应该让当前的内容来评估。
执行另一个请求是获取尚未解析和解释的源的唯一方法，可能是动态修改，然后重新序列化。如果您可以接受重新序列化但不希望用户交互，请在 DOMContentLoaded 时间使用您最喜欢的 DOM 序列化方法并将其存储在某处以供将来查找

标签： javascript dom

【解决方案1】：

这是正确的行为。您使用 DOM（文档对象模型）获取 HTML 字符串，它反映了您在浏览器中看到的当前 HTML 页面（包括任何更改）

如果需要保留文本框的旧值，则需要：

或者，在页面加载时存储文本框的原始值以供以后比较
或者，只有当你需要真正的 HTML 源代码时，你可以这样做：
1. 确保您的代码是浏览器运行的第一个代码，获得跨浏览器解决方案可能会很棘手（看看这个question），然后在您的代码中存储一份document.body.outerHTML 供以后使用。
2. 或，向当前 URL 发起请求并将返回正文存储为 HTML 源代码，这样您就可以确定您拥有原始 HTML 源代码的副本，但需要额外花费 1请求。

//jQuery code
$.get(window.location.href, function (resp) {
     // store the resp.data on some object
     var sourceHTML = resp.data;
 })
 .fail(function (resp) {
     // error handling
 });

在下方添加了 Paul S 的评论

document.body.outerHTML 将仅包含 <body> 部分。这 (new XMLSerializer).serializeToString(document) 会给你整个<html>，包括<!DOCTYPE html>

【讨论】：

您也可以运行(new XMLSerializer).serializeToString(document) 而不是使用outerHTML。这将包括诸如<!DOCTYPE html> 之类的东西