在前端开发中，我们经常会用到iframe标签来嵌入其他网页或者应用程序。但是，在使用iframe时，有时候需要从嵌套的iframe中获取父URL上的信息。本文将详细介绍如何通过JavaScript从嵌套的iframe中访问父URL，并提供相应的示例代码。
如何从iframe中访问父URL
要从iframe中访问父URL，可以通过JavaScript中的window.parent属性来实现。 window.parent属性返回当前窗口的父级窗口对象，因此可以使用该属性来访问父级窗口的URL。
// 获取当前iframe所在窗口的父级窗口的URL var parentUrl = window.parent.location.href;
如果想要在iframe中执行来自父级URL的JavaScript代码，则可以使用window.parent.postMessage()方法将消息传递给父窗口。 父窗口可以通过侦听message事件来接收这些消息并采取相应的措施。
下面是一个示例代码，展示如何从iframe中向父窗口发送消息并接收响应：
-- -------------------- ---- -------
-- ---------------
-------------------------------- ---- -------- ---------------------------
-- ---------------------
---------------------------------- ----------------
--------------- --- ------------------------- -- ---------- --- ------ ---- ---------
--------------------- -------- ---- ---------
-
---在上面的示例中，我们向https://www.example.com发送了一条消息，并在父窗口中侦听message事件来接收响应。 父窗口通过检查event.origin属性和event.data属性来验证消息是否来自预期的来源，并采取相应的措施。
深度：访问跨域iframe中的父URL
当嵌套的iframe与其父级窗口属于不同的域时，访问父级URL会受到浏览器的安全限制。这是因为浏览器实现了同源策略，即只有在同一域下的文档才能相互通信。
要从跨域iframe中访问父URL，可以使用window.postMessage()方法传递消息并在父级窗口中侦听message事件。 这种方法允许两个窗口之间进行安全的跨域通信。
以下是一个处理跨域iframe的示例代码：
-- -------------------- ---- -------
-- ------------------
-------------------------------- ---- ------------ -------- ---------------------------
-- --------------------
---------------------------------- ----------------
--------------- --- ------------------------- -- ---------- --- ------ ---- ------------ ---------
--------------------- ------- ---- ------------ ---------
-
-- -------在上面的代码中，我们向https://www.example.com发送了一条消息，并在父窗口中侦听来自跨域iframe的消息。 父窗口可以通过检查event.origin属性和event.data属性来验证消息是否来自预期的来源，并采取相应的措施。
指导意义
从iframe访问父URL可能是前端开发中非常有用的技术。然而，在实践中，必须注意到跨域安全性问题，并正确地使用postMessage()方法以确保安全通信。 本文提供了如何使用JavaScript从嵌套的iframe中访问父URL的基本知识，并提供了相应的示例代码，以帮助您
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/9985
