如何从页面获取 HTML 源代码？

IT技术 javascript html
2021-03-07 09:58:05

有没有办法使用javascript访问页面HTML源代码？

我知道我可以使用，document.body.innerHTML但它只包含主体内部的代码。我想获取所有页面源代码，包括 head 和 body 标签及其内容，如果可能的话，还有 html 标签和 doctype。是否可以？

5个回答

利用 

document.documentElement.outerHTML

或者 

document.documentElement.innerHTML
@mck89：没有浏览器，但 IE 会有outerHTML.
2021-04-22 09:58:05
@LiamNewmarch 在您发表评论 2 年后，也就是在最初的帖子发布 2 年后，现在 Firefox 似乎也实现了外层 HTML。:)
2021-04-24 09:58:05
如果其他人仍在调查此事，情况已有所改变。@Crescent Fresh 2 年前是正确的，但是最新版本的 Chrome 和 Safari 也实现了 HTMLELement.outerHTML - 尽管在撰写本文时，Firefox 还没有。
2021-04-26 09:58:05
这是 DOM 的当前状态，而不是源代码。
2021-04-26 09:58:05
请注意，您使用 Firefox/大多数浏览器获得的来源是您提供的“真实”来源。在 IE 中，您将获得页面的“实时”HTML，包括用户对表单所做的任何更改、任何新的 DOM 内容等。在 IE 中，它也将是 IE 在请求 .innerHTML 时提供的混合大小写无效标签汤元素。
2021-05-12 09:58:05

这可以使用XMLSerializer在单行中完成。

var generatedSource = new XMLSerializer().serializeToString(document);

这给出了字符串

<!DOCTYPE html><html><head>

<title>html - javascript page source code - Stack Overflow</title>
...
不幸的是，如果文档内容有任何需要在 XML 中转义的字符，您将得到垃圾。此外，您不会得到真正的原始字符串，但会得到一些略有不同的东西（例如，包括 XML 模式链接）。
2021-04-28 09:58:05

一种方法是使用XMLHttpRequest重新请求页面，然后您将从 Web 服务器逐字获取整个页面。

请注意，服务器不一定以完全相同的方式响应两个单独的请求。
2021-05-02 09:58:05

前提是

  • 需要真正的 html 源代码（不是当前的 DOM 序列化）
  • 并且页面是使用 GET 方法加载的，

页面源码可以重新下载：

fetch(document.location.href)
    .then(response => response.text())
    .then(pageSource => /* ... */)
@dantechguy 你在说什么？OP 中没有关于 REST 的任何内容。端点是否为 REST 取决于服务器。该fetchAPI通常由客户端JS谈REST端点，但使用fetch在非REST API端点不会神奇地把它变成一个REST之一。但即使我们谈论 REST，无状态也无关紧要。如果资源在请求之间实际被修改，或者您访问资源的权限被撤销，或者由于许多其他原因，两个相同的 REST GET 请求可以返回不同的数据。
2021-04-21 09:58:05
这是不可靠的，因为无法保证服务器下次会提供相同的内容。
2021-04-29 09:58:05
@SzczepanHołyszewski 鉴于 REST 协议被定义为stateless，只要您在 ajax 请求中发送与浏览器相同的标头，那么我就相信服务器会发送相同的响应。
2021-04-30 09:58:05
通过至少添加一个Accept类似于浏览器的标头，您可以使这更可靠一些。但是，是的，这种方法通常并不可靠。
2021-05-05 09:58:05

对于 IE，您还可以使用：document.all[0].outerHTML

其它你可能感兴趣的问题
上一篇如何仅使用javascript将图像转换为字节数组以将图像存储在sql server上？ 下一篇Math.random() 如何在 javascript 中工作？