将文档添加到 iFrame

Question

将文档添加到 iFrame

4

我目前通过XHR接收网页的部分内容，然后使用DOMParser进行解析。之后我更改了一些元素，但是我无法将文档添加到iFrame中。

解析的文档没有问题，但是当调用iFrame.contentDocument = parsedDocument将该文档附加到iFrame时，iFrame.contentDocument保持为空（实际上有html、head和body标签，但它们的内容为空）。

我这样解析接收到的数据：

var parser = new DOMParser();
var parsedDocument= parser.parseFromString(xhr.response, 'text/html');

我的期望是做类似这样的事情：

iFrame.contentDocument = parsedDocument;

- MarijnS95

@epascarello，现在iFrame中显示为“[object HTMLDocument]”。 - MarijnS95

@MarijnS95 你应该尝试使用xhr.response而不是parsedDocument。parsedDocument是一个HTMLDocument对象，而你想要写入实际的字符串，否则它会尝试写入HTMLDocument.toString()，这将返回[object HTMLDocument]。 - Joeytje50

@Joeytje50，那我该如何管理元素的变化呢？ - MarijnS95

@epascarello 当使用.toString()时，它也会返回"[object HTMLDocument]"。那么我该如何从文档中提取HTML字符串呢？ - MarijnS95

@MarijnS95 我知道如何修复它，我会发布一个答案。 - Joeytje50

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joeytje50 · Accepted Answer

就像epascarello在评论中所说的那样，以下代码可以实现：

var doc = document.getElementById('iframeId').contentWindow.document;
doc.open();
doc.write(xhr.response);
doc.close();

但是，由于您需要在将文档放入iframe之前修改它，因此您首先需要执行以下操作：

//your code
var parser = new DOMParser();
var parsedDocument = parser.parseFromString(xhr.response, 'text/html');
//put your required edits here
parsedDocument.getElementById('foo').style.color = 'red'; //example
//now to get back the edited HTML code as a string
var newHTML = parsedDocument.documentElement.outerHTML;
//and now for the code epascarello mostly wrote
var doc = document.getElementById('iframeId').contentWindow.document;
doc.open();
doc.write(newHTML);
doc.close();

您可能还想在那里指定一个文档类型，可以通过将doc.write(newHTML);这一行替换为以下内容来实现：

doc.write('<!DOCTYPE html>'+ newHTML);

因为 document.documentElement.outerHTML 不包含与其相关的 doctype。