iframe中获取顶层页面的location

在iframe中获取顶层页面的location，可以使用parent对象的location属性。具体的代码如下：

console.log(parent.location);

这将在控制台中输出顶层页面的URL和其他相关信息。如果你只想获取顶层页面的URL，可以使用以下代码：

console.log(parent.location.href);

这将只输出顶层页面的URL。需要注意的是，如果iframe和顶层页面不在同一个域名下，由于浏览器的跨域安全限制，你将无法访问顶层页面的location信息。

相关问题

iframe嵌套页面重定向

回答: 当在嵌套的iframe中进行页面跳转时，可能会出现地址栏的hash路由没有改变的问题。为了解决这个问题，可以在嵌套的页面中添加一段JavaScript代码来实现重定向。可以使用以下两种方法之一来解决这个问题。

方法一：在login.html页面中添加以下代码：

$(function () {
  if(window != window.top){
    window.top.location='/login/';
  }
});

这段代码的作用是，如果当前窗口不是顶层窗口（即在iframe中），则将顶层窗口的地址重定向到/login/页面。

方法二：在login.html页面中添加以下代码：

$(function () {
  if(window != top){
    top.location.href=location.href;
  }
});

这段代码的作用是，如果当前窗口不是顶层窗口（即在iframe中），则将顶层窗口的地址重定向到当前页面的地址。

通过使用以上方法之一，可以解决在iframe嵌套页面中进行重定向时地址栏hash路由没有改变的问题。
#### 引用[.reference_title]
- *1* [iframe 重定向问题](https://blog.csdn.net/mChales_Liu/article/details/108588435)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [django登录失效重定向，解决iframe页面嵌套问题](https://blog.csdn.net/wuyepiaoxue789/article/details/125071204)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

iframe不同子页面跳转

### iframe 子页面之间的跳转

当处理多个嵌套的 `iframe` 页面时，可以通过 JavaScript 实现不同子页面间的跳转。对于多层嵌套的情况，如 D 是 C 的 `iframe`，C 又是 B 的 `iframe`，以此类推，可以利用窗口对象的方法来实现跨帧导航。

#### 使用 window.top 或者 parent 访问上级框架并设置 src 属性

为了使某个特定层次下的 `iframe` 跳转至另一 URL，可以在目标 `iframe` 中执行如下脚本：

// 假设当前是在最底层的D页面里操作
parent.frames['frameName'].location.href = "newURL"; // frameName为中间层C页面中定义的名字属性值

或者更通用的方式是使用 `window.parent` 来访问上一层级的文档，并修改其指定名称或索引处的 `iframe` 的源地址[^4]。

#### 利用 postMessage API 安全地与其他上下文通信

考虑到安全性和兼容性问题，在现代浏览器环境下推荐采用 `postMessage()` 方法来进行父子间的消息传递。这种方式允许发送自定义消息给其他浏览环境而不受限于同源策略限制。

接收方监听 message 事件以获取来自发出者的指令，进而决定如何响应这些请求，比如更改自身的 `location` 属性达到跳转目的[^3]。

<!-- 在顶层 A.html -->
<iframe id="bFrame" name="bFrame"></iframe>

<script>
  function receiveMessage(event){
      console.log('received:', event.data);
      if (event.origin !== 'http://example.com') return;
      
      document.getElementById('bFrame').src=event.data.newSrc;
  }
  
  window.addEventListener('message',receiveMessage,false);
</script>

<!-- 在下层某页面中 -->
<button onclick="sendMessage()">点击跳转</button>

<script>
function sendMessage(){
    var newUrl='https://www.example.com/newPage';
    
    top.postMessage({action:'changeSrc',newSrc:newUrl},'*');
}
</script>

这种方法不仅适用于直接父子关系之间，也支持跨越更多层级的间接关联场景[^2]。