子页面访问父页面

子页面访问父页面的方式主要依赖于页面之间的关系,特别是它们是否处于同一域、是否是嵌套在 <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 等方法进行通信。
相关推荐
天蒙蒙亮23 分钟前
打安卓apk包+“应用商城”发布
前端·uni-app
Lank_M34 分钟前
视频压到指定大小总超一截?码率控制的误差拆开看
前端
用户20545557880036 分钟前
飞书运费台账同步到 MySQL:单一策略落地教程
前端
LEE36 分钟前
别把 Agent 架构画成组织架构图——子代理该不该拆,用任务级 Eval 说话
前端·后端·ai编程
梦醒江南37 分钟前
RAG 证据链验收:别只测答案像不像,要证明它从哪里来
前端·agent·ai编程
费曼学习法38 分钟前
无人值守AI内容矩阵实战(8):把标题 A/B 实验做成可判胜的流水线
前端
CodeMi1 小时前
2026 CSS 接管了这些 JS 的活:6 个 Baseline 特性的落地取舍
javascript·css
lemon_yyds1 小时前
vue 实现轮播 - 一张半效果
前端
阿明的小蝴蝶1 小时前
自定义桌面应用、内置系统应用与镜像
前端
代码搬运媛1 小时前
原生websocket 双工demo
前端