在 Web 前端开发中，我们经常需要使用 iframe 来嵌入外部页面。但是，由于浏览器同源策略的限制，iframe 内的页面无法直接与父级页面进行通信。本文将介绍如何通过几种方法实现 iframe 和父站点之间的通信。
1. 使用 URL hash
URL hash 是指 URL 中 # 符号后面的内容，它可以用来在不同页面之间传递信息。在父页面中，可以通过监听 hashchange 事件来获取子页面发送的信息。
以下是一个示例代码：
-- -------------------- ---- -------
---- --- ---
------- --------------------------
--------
------------------------------------- ---------- -
--- ------- - ------------------------------
------------------- - ---------
---
---------
---- --- ---
--------
--------------------------- - ------- ---------
---------在子页面中，我们可以通过 window.parent 访问父页面的全局对象，并将信息写入 URL hash。父页面则通过监听 hashchange 事件来获取子页面发送的信息。
2. 使用 postMessage API
postMessage API 可以在不同窗口之间安全地传递消息。在父页面中，可以通过 window.postMessage() 方法向子页面发送消息；在子页面中，可以通过 window.addEventListener('message', handler) 监听消息并做出响应。
以下是一个示例代码：
-- -------------------- ---- -------
---- --- ---
------- --------------------------
--------
---------------------------------- --------------- -
-- ------------- --- --------------------- ------- -- ----------
------------------- - ------------
---
--- ------ - ---------------------------------
---------------------------------------- -------- ----------------------
---------
---- --- ---
--------
---------------------------------- --------------- -
-- ------------- --- --------------------- -------
------------------- - ------------
-------------------------------- --------- --------------
---
---------在父页面中，我们可以通过 window.postMessage() 向子页面发送消息，并传递一个安全的目标窗口源参数。子页面则通过监听 message 事件来获取父页面发送的信息，并用 event.source.postMessage() 方法向父页面回复消息。
3. 使用同域代理页面
如果我们无法修改被嵌入的页面，也无法使用前两种方法，我们可以考虑使用同域代理页面。我们可以创建一个与父页面同域的代理页面，在代理页面中与子页面进行通信，并将信息传递给父页面。
以下是一个示例代码：
-- -------------------- ---- -------
---- --- ---
------- --------------------------
--------
---------------------------------- --------------- -
------------------- - ------------
---
---------
---- ---- ---------- ---
------- ---------------------------------------------
--------
---------------------------------- --------------- -
-- ------------- --- --------------------- -------
------------------- - ------------
------------------------------------- -----
---
---------在父页面中，我们可以将 iframe 的 src 属性设置为代理页面的 URL。代理页面中则包含一个与子页面同域的 iframe，并通过监听 window.postMessage() 来获取子页面发送的信息，并将其传递给父页面。
总结
本文介绍了三种方法来实现 iframe 和父站点之间的通信：URL hash、postMessage API 和同域代理页面。不同场景下应选择不同的通信方式，以便实现最佳的用户体验和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10172
