子页面访问父页面

子页面访问父页面的方式主要依赖于页面之间的关系,特别是它们是否处于同一域、是否是嵌套在 <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 等方法进行通信。
相关推荐
梦想的颜色17 小时前
前端UI宝藏SKILL——UI/UX Pro Max
前端·ui·ux
無名路人17 小时前
uniApp 小程序 vue3 app.vue静默登录其他页面等待登录完成方式二
前端·微信小程序·ai编程
CoCo的编程之路17 小时前
2026 前端效能飞跃:深度解析智能助手的页面构建最大化方案
前端·人工智能·ai编程·智能编程助手·文心快码baiducomate
Dxy123931021617 小时前
Python 去除 HTML 标签获取纯文本
开发语言·python·html
砚底藏山河17 小时前
python、JavaScript 、JAVA,定制化数据服务,助力业务高效落地
java·javascript·python
JavaAgent架构师17 小时前
前端AI工程化(一):AI通信协议深度解析
前端·人工智能
11_x17 小时前
JS 底层:乖宝宝引擎和乖宝宝声明
javascript
flex罗小黑17 小时前
前端手机号脱敏的 4 个层级,你在第几层?
javascript
林恒smileZAZ17 小时前
前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览
前端·pdf
孙69034218 小时前
electron播放本地任意格式的视频
前端·javascript