在 Web 开发中，iframe（内联框架）常用于在一个网页中嵌入另一个网页，实现父子页面之间的通信可以通过以下几种方式：
一、window.name 属性
- 父页面先将数据赋值给自身的
window.name属性，然后跳转到iframe页面。
```html <!DOCTYPE html>
2. `iframe`页面通过读取自身的`window.name`属性获取数据。
```html
<!-- iframe 页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe 页面</title>
</head>
<body>
<script>
window.onload = function () {
var parentData = window.name;
console.log(parentData);
}
</script>
</body>
</html>
二、postMessage 方法
这是一种跨域通信的标准方式，适用于不同源的iframe之间通信，也可用于同源的iframe。
- 父页面发送消息：
```html <!DOCTYPE html>
2. `iframe`页面接收消息并响应：
```html
<!-- iframe 页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe 页面</title>
</head>
<body>
<script>
window.addEventListener('message', function (event) {
if (event.data === '父页面发送的消息') {
// 处理消息，这里可以发送回消息给父页面
event.source.postMessage('iframe 响应的消息', event.origin);
}
});
</script>
</body>
</html>
三、利用查询参数（适用于同源页面）
- 父页面在跳转到
iframe页面时，通过查询参数传递数据：
```html <!DOCTYPE html>
2. `iframe`页面从查询参数中获取数据：
```html
<!-- iframe 页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe 页面</title>
</head>
<body>
<script>
var searchParams = new URLSearchParams(window.location.search);
var parentData = searchParams.get('data');
console.log(parentData);
</script>
</body>
</html>
以上就是几种常见的iframe父子页面通信的方式，在实际开发中可根据具体需求和场景选择合适的通信方法。
