使用 Javascript 访问 iFrame 中的 DOM

Question

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

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

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

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

Answer 1

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

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

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