当我们需要在一个网页中嵌入另外一个网页时，通常会使用<iframe>标签。但是在某些情况下，可能需要在父级页面中访问iframe中的变量。在这篇文章中，我们将介绍如何实现这一功能。
通过window对象
在Javascript中，可以通过window对象来访问iframe中的内容。例如，如果我们有以下HTML代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------------ ------- ------ -------- -------------------------- --------- ----- ------------ - ----------------------------------------------- ----- ---------------- - --------------------------- -------------------------------- ---------- ------- -------
在iframe中有以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- ------------ ------- ------ --------- ----- ------------- - ------ ---- --- ----- ------- ---------- ------- -------
在上面的父级页面示例中，我们首先获取了通过document.querySelector()方法选取到的iframe元素，然后通过其contentWindow属性获取了指向该iframe窗口的window对象。接着，我们就可以在父级页面中访问从iframe中传递过来的变量值。
跨域问题
需要注意的是，在进行跨域访问时，访问iframe中的变量可能会遇到一些问题。如果iframe中的内容来自不同的域名，那么在父级页面中就无法通过contentWindow属性访问该iframe窗口的window对象，因为浏览器会防止跨域访问。
这时候我们可以使用postMessage方法来进行跨域通信。
通过postMessage方法
postMessage方法可以安全地实现跨域通信。其基本用法如下：
otherWindow.postMessage(message, targetOrigin);
其中，otherWindow是一个对目标窗口引用的指针，message是要传递的数据，targetOrigin是允许接收消息的窗口的源地址。
例如，在父级页面中的代码可能如下所示：
let iframeWindow = document.querySelector("iframe").contentWindow;
iframeWindow.postMessage("Hello from the parent page!", "http://childpage.com");而在iframe中则需要添加一段监听事件的代码：
window.addEventListener("message", function(event) {
if (event.origin !== "http://parentpage.com") return;
console.log(event.data);
}, false);这段代码将在iframe窗口加载后立即运行，并等待来自父级页面的信息。当收到消息时，它将验证发送者的来源，然后将接收到的数据记录到控制台中。
结论
本文介绍了两种方法来访问iframe中的变量，以及如何解决跨域问题。虽然这些技术对于前端开发人员来说非常有用，但是在使用它们时需要小心谨慎。
示例代码：https://codepen.io/chatgpt/pen/vYygWWy
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29033