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