在前端开发中，我们经常使用 iframe 元素来嵌入其他网页或应用程序。但是，如果我们需要从 iframe 中更改父级的 URL，则可能会遇到一些问题。在这篇文章中，我将详细介绍如何通过 JavaScript 和 HTML5 postMessage API 在 iframe 中更改父级的 URL，并提供示例代码和指导意义。
问题描述
当我们在 iframe 中加载一个不同域名的页面时，由于浏览器的同源策略，JavaScript 将无法直接访问父级文档对象，因此也不能更改父级 URL。如果我们尝试使用 window.top.location.href 或 parent.location.href 更改父级 URL，那么浏览器将会抛出一个错误，提示“拒绝访问”。
然而，有时候我们确实需要更改父级 URL，例如当我们在 iframe 中进行授权时需要跳转到授权页面并返回到原来的页面。那么该怎么办呢？
解决方案
解决这个问题的关键在于使用 HTML5 的 postMessage API。postMessage API 允许不同域之间的窗口相互通信，从而使得我们可以在 iframe 中向父级窗口发送消息，并在父级窗口中处理消息。具体步骤如下：
- 在 iframe 页面中，编写 JavaScript 代码来发送消息到父级窗口。
-- - ------ ------------ ----- ------- - - ----- ------------------ ---- --------------------- -- ---------------------------------- -----
- 在父级窗口中，编写 JavaScript 代码来监听消息，并处理消息。
-- ---------- ------ --------
---------------------------------- ------- -- -
-- ------------- --- ----------------------------- -
-- ------------------------
-------
-
----- ------- - -----------
-- ------------- --- ------------------ -
-------------------- - ------------
-
---在上述代码中，我们首先定义了一个包含要传递给父级窗口的消息类型和 URL 的 JavaScript 对象。然后，在 iframe 页面中，我们使用 window.parent.postMessage() 方法将该消息发送给父级窗口。注意，第二个参数是一个字符串形式的目标原点（target origin），用于指定应该接收消息的窗口的域名。在本例中，我们使用通配符 '*' 来指示所有域名都可以接收该消息。
在父级窗口中，我们使用 window.addEventListener('message', handler) 方法来监听来自 iframe 页面的消息。在事件处理程序中，我们检查消息来源是否为预期的域名，防止恶意网站向我们发送虚假消息。然后，我们检查消息类型是否为 changeParentUrl，如果是，则将父级 URL 更改为消息中指定的 URL。
示例代码
在下面的示例中，我们将创建两个 HTML 文件：一个是父级页面 parent.html，另一个是嵌入的 iframe 页面 iframe.html。点击 iframe 页面上的“更改父级 URL”按钮可以更改父级页面的 URL。注意，这里使用了 jQuery 来处理事件和 DOM 操作，但也可以使用原生 JavaScript 来实现相同的功能。
parent.html
--------- -----
------
------
------------- ------------
-------
------
---------- ---------
------- ----------------- ----------- ----------------------
------- -----------------------------------------------------------
--------
--------------------------
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------