从 iframe 抓取父页面 html答案

【问题标题】：scrape parent page html from iframe从 iframe 抓取父页面 html
【发布时间】：2011-02-23 17:43:06
【问题描述】：

我有一个 iframe，用于从其父页面生成 PDF。 PDF 制作器 (ABCpdf) 需要一个 HTML 文件，然后将其转换。

我目前所做的是使用以下方法抓取父母的 HTML：

var temp;
temp=parent.document.body.parentNode.innerHTML;

然后我使用 iframe 中的表单将其提交到服务器，在服务器上对其进行按摩以删除 iframe 部分等内容，然后将其保存为 PDF 制作者的临时 HTML 文件。

但是生成的 HTML 代码被破坏了，<BODY> 而不是 <body> 等，并且删除了 ID 周围的引号等。

有没有更好的方法来获取 HTML？

我不只是将页面重新生成为 HTML 的原因是父页面是一个复杂的报表。它包含各种控件以允许用户显示/隐藏部分或对表格中的行进行排序。所以我得到的 HTML 必须反映用户的自定义。

谢谢

【问题讨论】：

我必须做的几乎和你用 ABCPdf 描述的一样。我最终要做的是创建页面外观的自定义 JSON 标记，然后使用该信息重新生成页面。我知道这很痛苦，但它也为您提供了一些灵活性来执行诸如添加自定义页眉或页脚之类的事情。

标签： javascript html scrape

【解决方案1】：

正如大卫所提到的，使用innerHTML，您几乎完全受浏览器的支配。如果您想控制序列化，您可以自己遍历父文档的 DOM，将节点的字符串表示附加到缓冲区。这将花费更长的时间并涉及更多代码，但会导致对输出的完全控制。

类似这样的东西（伪代码）：

function serializeAttributes(node, buffer) {
  for (attribute in node.attributes) {
    buffer.append(' ' + attribute.name + '="' + attribute.value + '"');
  }
}

function serializeChildren(node, buffer) {
  for (child in node.childNodes) {
    if (child is a text node) {
      buffer.append(child.value);
    } else if (child is an element) {
      // You can also add checks to avoid going into IFrames, etc.
      serializeElement(child, buffer);
    }
  }
}

function serizalizeElement(node, buffer) {
  buffer.append('<' + node.tagName); 
  serializeAttributes(node, buffer);
  if (node.hasChildren) {
    buffer.append('>');
    serializeChildren(node, buffer);
    buffer.append('</' + node.tagName + '>');
  } else {
    buffer.append('\>');
  }
}

serializeNode(window.parent.document);

【讨论】：

【解决方案2】：

访问页面的 DOM 并序列化为 HTML 将以浏览器希望将其序列化为的任何方式获取数据。就规范而言，大写标记名称和省略属性值周围的可选引号是可以的。

如果您想要原始来源，则需要使用 XHR 发出 HTTP 请求以获取最新信息。

【讨论】：

我不想要原始来源。我想要用户自定义的来源。谢谢
您将获得用户自定义的源。浏览器将不旨在为您提供尽可能类似于原始代码样式的东西......或根本没有。