子页面访问父页面

子页面访问父页面的方式主要依赖于页面之间的关系,特别是它们是否处于同一域、是否是嵌套在 <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 等方法进行通信。
相关推荐
We་ct14 小时前
LeetCode 125. 验证回文串:双指针解法全解析与优化
前端·算法·leetcode·typescript
帅得不敢出门14 小时前
Android Framework在mk中新增类似PRODUCT_MODEL的变量并传递给buildinfo.sh及prop属性中
android·linux·前端
她超甜i14 小时前
css省略号展示,兼容性强,js判断几行,不需要定位
javascript·css·vue.js
小码吃趴菜15 小时前
【无标题】
前端·chrome
毕设源码-朱学姐15 小时前
【开题答辩全过程】以 基于HTML5的购物网站的设计与实现为例,包含答辩的问题和答案
前端·html·html5
梦65016 小时前
CSS 元素垂直水平居中的 8 种方法
前端·css
We་ct16 小时前
LeetCode 68. 文本左右对齐:贪心算法的两种实现与深度解析
前端·算法·leetcode·typescript
ShoreKiten16 小时前
ctfshow-web316
运维·服务器·前端
前端 贾公子16 小时前
release-it 使用指南
前端·javascript
全栈技术负责人17 小时前
前端团队 AI Core Workflow:从心法到落地
前端·人工智能·状态模式