使用 Javascript 访问 iFrame 中的 DOM

Posted 2023-05-09

【中文标题】使用 Javascript 访问 iFrame 中的 DOM

【英文标题】：Access DOM inside iFrame using Javascript

【发布时间】：2021-01-30 17:49:03

【问题描述】：

我正在尝试从我的主页访问 DOM 元素并想要更新 CSS。我使用以下内容；

var myIframeContainerEl = $('#myIframeContainerEl');
myIframeContainerEl.contents().find(".required").css("color", "#f0f0f0");

由于某种原因，这不起作用。 虽然它能够找到“myIframeContainerEl”，但由于某些原因，“myIframeContainerEl.contents()”显示的长度为 0。 以上不是正确的做法吗？

另外，补充一下，我在我的 Ember 项目中使用它，并在 didTransition 钩子和“afterRender”中使用它 因此，当我尝试访问时，该元素存在。

【参考方案1】：

iframes 在它们出现的文档中没有内容。但是它们有一个 contentDocument 属性，该属性引用了它们确实包含内容的文档。您可以告诉 jQuery 像这样查看该文档：

var frameDocument = $('#myIframeContainerEl')[0].contentDocument;
$(frameDocument).find(".required").css("color", "#f0f0f0");

（请注意，这假设iframe 的内容来自同一来源，否则Same Origin Policy 禁止访问，除非使用CORS 或类似名称。）

【讨论】：

谢谢...这可能是 CORS 的问题...所以我的主页在 myMainSite.MyDomain.com 上，而 iframe 是从 myIframe.MyDomain.com 呈现的 ....不确定是否考虑过跨域，行不通？

不同的子域被认为是不同的来源。第二个link 总结得很好。

@testndtv - 这不是只是一个 SOP 的东西，你必须调整代码如上所示。在子域的特定情况下，您可能只使用document.domain 没问题，但 CORS 会是更好的方法。

所以当你说 document.domain...我不确定你到底是什么意思？

@testndtv - 这就是链接的用途。 :-)