在前端开发中，我们经常会使用iframe元素来嵌入其他网页或内容。但是，有时候我们需要从父窗口（即包含iframe元素的窗口）中访问iframe元素内部的DOM元素或调用其方法。本文将介绍如何实现这一功能。
获取iframe元素
首先，我们需要获取对iframe元素的引用。可以使用如下代码：
--- ------ - -------------------------------------
这里假设我们的iframe元素有一个id属性值为“my-iframe”。如果没有id属性，也可以使用其他方式进行选择，例如通过标签名或类名等。
访问iframe元素内部的DOM元素
一旦我们获得了对iframe元素的引用，就可以通过它访问iframe元素内部的DOM元素。下面是一个例子：
--- -------- - ---------------------- -- ------------------------------ --- -------- - -------------------------------------
这里我们首先获取了iframe元素的contentDocument属性或contentWindow.document属性。这两个属性都指向iframe元素内部的document对象。然后通过document对象获取了ID为“inner-div”的元素。
需要注意的是，在跨域情况下（即父窗口和iframe元素所属的域名不同），上述方法可能会因为安全策略而失败。
调用iframe元素内部的方法
除了访问DOM元素，我们还可以通过iframe元素的引用调用其中定义的方法。下面是一个例子：
--- -------- - --------------------- ------------------------------- ----------------------
这里我们首先获取了iframe元素的contentWindow属性，它指向了iframe元素内部的window对象。然后我们调用了window.postMessage()方法并传递了两个参数。第一个参数是要传递的消息，“message”；第二个参数是接收消息的窗口地址，“http://example.com”。
需要注意的是，在跨域情况下，同样会有安全策略限制。
总结
通过本文的介绍，我们学习了如何从父窗口访问iframe元素内部的DOM元素和调用其方法。需要注意的是，在跨域情况下会存在安全策略限制，需要特别注意。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/14794