从父窗口访问iframe元素

在前端开发中，我们经常会使用iframe元素来嵌入其他网页或内容。但是，有时候我们需要从父窗口（即包含iframe元素的窗口）中访问iframe元素内部的DOM元素或调用其方法。本文将介绍如何实现这一功能。

获取iframe元素

首先，我们需要获取对iframe元素的引用。可以使用如下代码：

var iframe = document.getElementById('my-iframe');

这里假设我们的iframe元素有一个id属性值为“my-iframe”。如果没有id属性，也可以使用其他方式进行选择，例如通过标签名或类名等。

访问iframe元素内部的DOM元素

一旦我们获得了对iframe元素的引用，就可以通过它访问iframe元素内部的DOM元素。下面是一个例子：

var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var innerDiv = innerDoc.getElementById('inner-div');

这里我们首先获取了iframe元素的contentDocument属性或contentWindow.document属性。这两个属性都指向iframe元素内部的document对象。然后通过document对象获取了ID为“inner-div”的元素。

需要注意的是，在跨域情况下（即父窗口和iframe元素所属的域名不同），上述方法可能会因为安全策略而失败。

调用iframe元素内部的方法

除了访问DOM元素，我们还可以通过iframe元素的引用调用其中定义的方法。下面是一个例子：

var innerWin = iframe.contentWindow;
innerWin.postMessage('message', 'http://example.com');

这里我们首先获取了iframe元素的contentWindow属性，它指向了iframe元素内部的window对象。然后我们调用了window.postMessage()方法并传递了两个参数。第一个参数是要传递的消息，“message”；第二个参数是接收消息的窗口地址，“http://example.com”。

需要注意的是，在跨域情况下，同样会有安全策略限制。

总结

通过本文的介绍，我们学习了如何从父窗口访问iframe元素内部的DOM元素和调用其方法。需要注意的是，在跨域情况下会存在安全策略限制，需要特别注意。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14794