如何从父窗口访问 iframe 窗口变量？答案

【问题标题】：How to access iframe window variables from parent window?如何从父窗口访问 iframe 窗口变量？
【发布时间】：2021-09-20 11:09:12
【问题描述】：

我正在尝试围绕 iframe 构建一个包装器，该包装器需要使用 iframe 中的一些内容。

iframe 脚本将一些变量分配给 iframe 窗口，如下所示：

(function() {
   window.courseData = "course data goes here..."
})(window);

然后父窗口正在访问iframe窗口：

document.addEventListener('DOMContentLoaded', () => {  
    const iframeWindow = document.getElementById("iframe").contentWindow;
    console.log(iframeWindow); // Window about:blank > courseData {...}
})

当我在浏览器中查看控制台日志时，它会显示 iframe 窗口对象及其所有属性，包括 courseData 对象。但是，当我尝试直接访问 courseData 时，它返回 undefined...

console.log(iframeWindow.courseData); // undefined

我一生都无法弄清楚为什么我可以看到它，但无法访问它。任何想法将不胜感激！

注意：很遗憾，我无法更改 iframe 的内容，因此我无法使用其他方法将数据传递给父级。

另一个注意事项：iframe 来自服务器上的同一目录，因此不存在任何跨源问题。

【问题讨论】：

iframe IIFE 上的括号不匹配。
抱歉@Andy，这只是我在复制和粘贴中的错误。在实际代码中，它们确实匹配。

标签： javascript iframe

【解决方案1】：

所以经过更多的尝试和错误，我自己想通了！

对于任何感兴趣的人来说，问题是在调用我的父函数时 iframe 窗口尚未完全加载，因此变量返回未定义。

解决方法是在调用该函数之前使用一个函数来检查 iframe 何时完成加载，为此我在另一个堆栈溢出帖子中找到了一些有用的代码：

How to check if iframe is loaded or it has a content?

【讨论】：