jquery/js 获取iframe父、子窗口的元素

封面图 • 2025-10-29 • jQuery

在使用 **jQuery/JavaScript** 操作 **iframe** 的父窗口和子窗口元素时，需要注意以下几点：

---

## 一、获取 iframe 子窗口的元素

### 1. 获取 iframe 中的元素（子窗口）

```javascript
// 假设 iframe 的 id 是 "myIframe"
var iframe = document.getElementById("myIframe");

// 获取 iframe 的 window 对象
var iframeWindow = iframe.contentWindow;

// 获取 iframe 中的某个元素（例如 div#childDiv）
var childElement = iframeWindow.document.getElementById("childDiv");

// 使用 jQuery 操作
$(iframeWindow.document).find("#childDiv").css("color", "red");
```

> ⚠️ 注意：如果 iframe 的来源与当前页面不同（跨域），浏览器会阻止访问 `contentWindow` 和 `document`，这是出于安全考虑。

---

## 二、获取父窗口的元素（从 iframe 内部）

### 1. 从 iframe 内部访问父窗口的元素

```javascript
// 在 iframe 内部执行
var parentElement = window.parent.document.getElementById("parentDiv");

// 使用 jQuery
$(window.parent.document).find("#parentDiv").css("background", "yellow");
```

> 同样要注意：如果 iframe 是跨域的，`window.parent` 也会被浏览器限制访问。

---

## 三、跨域问题处理（了解）

如果你的 iframe 是**跨域的**（即 src 不同源），那么：

- 你**无法**直接通过 `contentWindow` 或 `window.parent` 访问其 DOM。
- 这是浏览器的安全策略（Same-Origin Policy）。

### 解决方案（如果可以控制两边）：

- 使用 `postMessage()` 实现跨域通信。
- 设置 `CORS` 头（服务器端）来允许访问。

---

## 四、完整示例（同源情况）

### 父页面 HTML

```html
<!DOCTYPE html>
<html>
<head>
    <title>Parent Page</title>
</head>
<body>
    <div id="parentDiv">Parent Element</div>
    <iframe id="myIframe" src="iframe.html"></iframe>

### iframe.html

```html
<!DOCTYPE html>
<html>
<head>
    <title>Iframe Page</title>
</head>
<body>
    <div id="childDiv">Child Element</div>

---

## 五、总结

| 情况 | 方法 |
|------|------|
| 从父页面访问 iframe 元素 | `iframe.contentWindow.document.getElementById(...)` |
| 从 iframe 访问父页面元素 | `window.parent.document.getElementById(...)` |
| 跨域时 | 需要使用 `postMessage()` 或设置 CORS |

如需进一步实现跨域通信或动态加载内容，请告诉我你的具体需求。