子页面访问父页面

子页面访问父页面的方式主要依赖于页面之间的关系,特别是它们是否处于同一域、是否是嵌套在 <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 等方法进行通信。
相关推荐
2601_963771377 分钟前
Hardening Enterprise WordPress Sites Against REST API Leaks and Bad Headers
前端·windows·word·php
蓝银草同学9 分钟前
Stream 实战:博客列表排序、过滤与分页(AI 辅助学习 Java 8)
java·前端·后端
2601_9571909018 分钟前
飞行影院安装施工指南:场地、动感系统与影片内容配套
大数据·前端·人工智能
爱折腾的小黑牛18 分钟前
简记往来批量录入功能的实现:从文本到结构化数据
前端·算法
sunfdf41 分钟前
Next.js 新手从零部署到首跑实战指南
开发语言·javascript·ecmascript
YHHLAI1 小时前
Agent 智能体开发实战 · 第六课:MCP 协议 —— 让 Agent 跨进程调用工具
前端·人工智能
SmartBoyW1 小时前
前端死磕:一文彻底搞懂 JS 事件循环 (Event Loop) 与宏微任务
前端·javascript
爱勇宝1 小时前
3位工程师靠“删AI代码”创业,一周收费1万美元:以后最贵的能力,可能不是写代码
前端·后端·架构
Curvatureflight1 小时前
客户端日志上报怎么设计?让线上问题不再只靠用户截图
前端·系统架构