子页面访问父页面

子页面访问父页面的方式主要依赖于页面之间的关系,特别是它们是否处于同一域、是否是嵌套在 <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 等方法进行通信。
相关推荐
程序员大阳19 分钟前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~36 分钟前
【Web Development】02 CSS
前端·css
风骏时光牛马1 小时前
后端服务接口开发与数据逻辑处理
前端
东鹏特饮1 小时前
经典打砖块(Breakout)游戏
前端·css·css3
IT_陈寒1 小时前
Vite的HMR把我整不会了:一个生产环境的热更新坑
前端·人工智能·后端
Mh1 小时前
如何使用双缓冲优化视频切换
前端
risenav1 小时前
低头蓄力,抬头起跳:《萤虫跳跳》的 Rokid AIUI 开发实战
前端
ZhengEnCi2 小时前
如何看待 Fable 5.2 用纯代码生成 1.4MB 视觉作品:光追、水面、倒影、火光的程序化生成原理
前端
再吃一根胡萝卜2 小时前
DSH 插件的 Host 与 Client:为什么「只加载了 Host」,以及要不要自己写 Client 加载器
前端
parade岁月3 小时前
AI 写的前端代码为什么总像 5 年前的?Chrome 官方出手了
前端