时间戳

首页 > 解决方案 > 如何从父窗口访问 iframe 窗口变量？

javascript - 如何从父窗口访问 iframe 窗口变量？

问题描述

我正在尝试围绕 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 来自服务器上的同一目录，因此不存在任何跨源问题。

标签： javascriptiframe

解决方案

因此，经过更多的反复试验，我自己弄清楚了！

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

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

如何检查 iframe 是否已加载或是否有内容？

推荐阅读