在前端开发中，我们经常会使用 iframe 元素来嵌入其他网页或应用程序。但是，当需要在 iframe 内部执行某些操作时，通常需要访问包含 iframe 的父级页面（也称为宿主页面）的属性或方法。本文将介绍如何在子页面中获取父页面的 URL。
获取父页面的 URL
我们可以通过 JavaScript 中的 window.parent.location.href 属性来获取父页面的 URL。在子页面中，可以使用以下代码来获取父页面的 URL：
----- --------- - ---------------------------- -----------------------
此代码将输出包含 iframe 的父级页面的 URL。但是，在跨域情况下，由于浏览器的安全策略，无法直接访问父窗口对象，因此会出现“拒绝访问”错误。
处理跨域问题
有一种方法可以解决跨域问题，即使用 postMessage() 方法从子页面向父页面发送消息。在父页面中，我们可以监听 message 事件并从中提取所需的信息。以下是一个示例：
子页面代码：
----- --------- - ---------------------------- ------------------------------------ -----
以上代码将使用 postMessage() 方法将父页面的 URL 发送到父页面。
父页面代码：
---------------------------------- --------------- - -- ------------- --- --------------------- ------- ----- --------- - ----------- ----------------------- ---
在上述代码中，我们监听 message 事件并检查事件的来源是否是我们信任的域。然后，我们从事件数据中提取父页面的 URL 并输出到控制台。
指导意义
通过本文，我们了解了如何从子页面获取父页面的 URL，并解决了跨域问题。在实际开发中，我们需要明确安全策略，防止恶意代码利用 iframe 窃取用户信息或执行其他攻击。同时，我们要学会使用合适的方法来在子页面和父页面之间进行通信，以实现更好的用户体验。
示例代码
以下是完整示例代码：
index.html：
--------- -----
------
------
------------- ------------
-------
------
---------- ---------
------- --------------------------
--------
---------------------------------- --------------- -
-- ------------- --- --------------------- -------
----- --------- - -----------
--------------------- ------ ------ -----------
---
---------
-------
-------child.html：
--------- -----
------
------
------------ ------------
-------
------
--------- ---------
--------
----- --------- - ----------------------------
------------------------------------ -----
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28856