js获取iframe中的window对象的实现方法

获取iframe中的window对象是我们在进行Web前端开发中经常需要面对的问题。这里提供两种方法来获取iframe中的window对象。

方法一：使用iframe元素的contentWindow属性

我们可以使用iframe元素的contentWindow属性来获取iframe中的window对象。该属性返回对iframe窗口/框架的 window 对象的引用。

// 获取iframe元素
const iframeElement = document.getElementById("myIframe");
// 获取iframe窗口/框架的 window 对象的引用
const iframeWindow = iframeElement.contentWindow;

方法二：使用window.frames属性

我们可以使用window.frames属性来获取iframe中的window对象。该属性返回窗口（window）的集合，这些窗口由其名称（命名）或数字索引标识。

// 获取对应iframe窗口的window对象
const iframeWindow = window.frames["myIframe"].window;

示例一代码：

<iframe id="myIframe" src="./iframe.html"></iframe>
<script>
  const iframeWindow = document.getElementById("myIframe").contentWindow;
</script>

示例二代码：

<iframe id="myIframe" src="./iframe.html"></iframe>
<script>
  /*
  * 当iframe在页面加载完成后再获取，则需在window的load事件中进行获取；
  * 否则会得到空值。
  */
  window.addEventListener("load", function() {
    const iframeWindow = window.frames["myIframe"].window;
  });
</script>

以上便是获取iframe中的window对象的两种方法。