Javascript获取父页的值

封面图 • 2025-12-15 • JavaScript

在 JavaScript 中，如果你需要从“父页面”（即包含当前页面的页面）获取值，通常是在 **iframe** 或 **弹窗（如 `window.open()` 打开的页面）** 的场景下使用。以下是几种常见情况下的实现方式：

---

## ✅ 情况一：当前页面是 `iframe`，想获取父页面的值

### 1. 在 iframe 页面中获取父页面的值
```javascript
// 获取父页面的变量
var parentValue = window.parent.someVariable;

// 或者调用父页面的函数
window.parent.someFunction();
```

### 2. 父页面定义的变量或函数
```html

<script>
    var parentVar = "这是父页面的值";
    function parentFunc() {
        alert("这是父页面的函数");
    }
</script>

---

## ✅ 情况二：当前页面是通过 `window.open()` 打开的子窗口，想获取父窗口的值

### 1. 在子窗口中获取父窗口的值
```javascript
// 获取父窗口的变量
var parentValue = window.opener.parentVar;

// 调用父窗口的函数
window.opener.parentFunc();
```

### 2. 父窗口中打开子窗口
```javascript
// 父窗口
var parentVar = "这是父窗口的值";
function parentFunc() {
    alert("这是父窗口的函数");
}

var childWindow = window.open("child.html", "childWindow");
```

---

## ⚠️ 注意事项

- **同源策略限制**：如果父页面和当前页面不在同一个域名、协议或端口下，浏览器会阻止跨域访问，这时 `window.parent` 或 `window.opener` 会抛出错误。
- 如果遇到跨域问题，可以考虑使用 `postMessage` 进行跨域通信。

---

## ✅ 跨域通信示例（使用 `postMessage`）

### 父页面：
```javascript
// 父页面向 iframe 发送消息
var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage({ key: 'value' }, '*'); // '*' 表示任意来源
```

### iframe 页面：
```javascript
window.addEventListener('message', function(event) {
    if (event.origin !== '父页面的域名') return;
    console.log('收到消息:', event.data);
});
```

---

## 总结

| 场景 | 方法 |
|------|------|
| iframe 中获取父页面的值 | `window.parent.variable` 或 `window.parent.function()` |
| 子窗口中获取父窗口的值 | `window.opener.variable` 或 `window.opener.function()` |
| 跨域时 | 使用 `postMessage` 进行安全通信 |

---

如果你能提供更具体的场景（比如是否是 iframe、是否跨域等），我可以给出更详细的代码示例。