javascript - 如何获取iframe的document对象？

Question

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

Iframe 内的 HTML 页面现在使用一些 JavaScript 来根据我尝试更改 css 的特定用户操作来更改 DomElement。 因此我执行以下 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 中时。我现在从主/父 html 文档获取文档，而不是从自己的(子)文档获取文档。 有人知道为什么吗？它似乎在 Firefox 中有效，但在 Chrome 和 IE 中无效。

当它查找“错误”文档时，我会在 DeveloperTools 中收到一条错误消息，指出:要替换的节点不是此节点的子节点。

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

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

感谢您的任何想法

Answer 1

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

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);