iframe父子页面通信

_揽

于 2024-04-28 19:21:12 发布

阅读量281

点赞数 9

分类专栏：前端学习笔记文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_59747594/article/details/138288441

版权

前端学习笔记专栏收录该内容

84 篇文章 3 订阅

订阅专栏

三、扩展：postMessage() 方法的语法：

一、创建父页面和子页面

首先，我们需要创建一个包含 iframe 的父页面和一个子页面，在父页面中嵌套子页面并实现它们之间的通信。

父页面（parent.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent Page</title>
</head>
<body>
    <h1>Parent Page</h1>
    <iframe src="child.html" id="myIframe"></iframe>

    <script>
        // 这里将在后文中介绍
    </script>
</body>
</html>

子页面（child.html）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Child Page</title>
</head>
<body>
    <h1>Child Page</h1>

    <script>
        // 这里将在后文中介绍
    </script>
</body>
</html>

二、实现父子页面之间的通信

在父页面和子页面中，我们可以通过 postMessage 方法来实现跨域通信。以下是一个简单的例子：

在父页面的 <script> 标签中：

const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('Hello from parent page!', '*');

window.addEventListener('message', (event) => {
    console.log('Message received in parent page:', event.data);
});

在子页面的 <script> 标签中：

window.addEventListener('message', (event) => {
    console.log('Message received in child page:', event.data);
    event.source.postMessage('Hello from child page!', event.origin);
});

window.parent.postMessage('Hello from child page!', '*');

三、扩展：postMessage() 方法的语法：

otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow：要发送消息的窗口对象。这可以是其他窗口、iframe 或者 worker 等。

message：要发送的数据。可以是任意 JavaScript 兼容的数据类型，如对象、数组、字符串等。targetOrigin：限定消息发送的目标域名。这是一个字符串，指定了接收消息的窗口的源。如果不需要限制目标域名，可以使用通配符 *。

transfer（可选）：传输的资源，如 ArrayBuffer 或者 ImageBitmap。这个参数会被传递给 postMessage 的 receiver。

_揽

关注

9
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
iframe父子页面通信

目录一、创建父页面和子页面父页面（parent.html）：子页面（child.html）：二、实现父子页面之间的通信在父页面的标签中：在子页面的标签中：三、扩展：postMessage() 方法的语法：首先，我们需要创建一个包含 iframe 的父页面和一个子页面，在父页面中嵌套子页面并实现它们之间的通信。子页面（child.html）：二、实现父子页面之间的通信在父页面和子页面中，我们可以通过 postMessage 方法来实现跨域通信。以下是一个简单的例子：在
复制链接

扫一扫