子页面访问父页面

子页面访问父页面的方式主要依赖于页面之间的关系,特别是它们是否处于同一域、是否是嵌套在 <iframe> 中、或者通过弹出窗口打开。下面是几种常见的子页面访问父页面的方法:

1. 通过 window.parent 访问父页面(适用于嵌套的 iframe)

当子页面是嵌套在父页面的 <iframe> 中时,子页面可以通过 window.parent 访问父页面的 DOM 和 JavaScript。这种方式适用于父子页面在同一域下的情况。

示例:

父页面

html 复制代码
<iframe src="child.html" id="myIframe"></iframe>

子页面(child.html)

javascript 复制代码
// 子页面访问父页面的 DOM 元素
window.parent.document.getElementById('parent-element').innerText = "更新父页面内容";

// 或者调用父页面的函数
window.parent.someFunction();
注意:
  • window.parent 只能访问父页面的内容。如果子页面和父页面在不同域(跨域),则无法直接访问父页面的 DOM 和 JavaScript,需使用 postMessage 等方法进行通信。
相关推荐
那年窗外下的雪.3 小时前
VXLAN EVPN 分层排障:从 VTEP 可达、ARP/MAC 到 MAC Mobility
服务器·前端·网络·数据库·spine
张元清3 小时前
React useTimeout Hook:声明式 setTimeout 与自动清理 (2026)
javascript·react.js
禁止摆烂_才浅4 小时前
JavaScript 类型判断:instanceof 与 constructor 原理深度解析
前端·javascript·面试
gezg4 小时前
DeepSeek Harness 插件:Excel 拖进输入框,AI 自己去读文件
前端·ai编程
Asize4 小时前
HTTP 明明无状态,登录态怎么就保住了——React + Zustand + JWT 鉴权全流程拆解
前端·javascript
两只羊ovo4 小时前
MCP:AI 界的 USB-C,把模型和世界「插」起来
前端
Darling噜啦啦4 小时前
JWT 登录鉴权全链路:从 Zustand 状态管理到 Axios 拦截器,彻底搞懂前端鉴权工程
前端
可涵不会debug4 小时前
LangChain 示例选择器(Example selectors)完整基础概念解读
服务器·前端·数据库
Csvn4 小时前
😱 React `<StrictMode>`:为什么 useEffect 被调用了两次?别慌,这是特性不是 bug
前端
Asize4 小时前
2 道大厂面试题:TS 工具类型我懂了,CSS 3 列布局把我问住了
前端·css·typescript