如何获取iframe的文档对象？

Question

我有一个显示特定信息的 iframe 的网站。他们都来自同一个域。因此，跨站点脚本的任何阻止都应该不是问题。

Iframe 中的 HTML 页面现在使用一些 JavaScript 来根据特定用户操作更改 DomElement 我尝试更改 css。因此我遵循 JavaScript 代码：

var oldlink = document.getElementsByTagName("link").item(1);
    
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
     
document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);

独立运行时效果很好。现在的问题是当它嵌入到 iframe 中时。我现在从 main/parent html 文档中获取文档，而不是从自己的（子）文档中获取文档。有人知道为什么吗？它似乎在 Firefox 中有效，但在 Chrome 和 IE 中无效。

当它查找 "wrong" 文档时，我会在 DeveloperTools 中收到一条错误消息：要替换的节点不是该节点的子节点。

我知道它找不到节点，因为它不在父文档中，而是在子文档中。

有人知道我该如何解决这个问题或我需要查找什么吗？我发现的唯一内容是如何访问父文档或子文档，这实际上是我不想要的行为。

感谢任何想法

Answer 1

不太清楚你想要什么，但如果你想更新框架内的元素，你需要用 iframe 文档替换 'document' like this:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

那么你的代码将是这样的：

var oldlink = innerDoc.getElementsByTagName("link").item(1);

var newlink = innerDoc.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);

innerDoc.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);

如何获取iframe的文档对象？

How to get document object of iframe?

html

javascript

iframe

document