iframe + postMessage 实现跨域通信

最新推荐文章于 2024-08-14 09:30:44 发布

yw00yw

最新推荐文章于 2024-08-14 09:30:44 发布

阅读量263

点赞数

分类专栏： web开发文章标签： iframe 通信跨域消息传递多窗口通信 postMessage

本文链接：https://blog.csdn.net/yw00yw/article/details/110383512

版权

web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

VScode安装Live Server 插件

在这里插入图片描述
注释：上面右键即可通过服务的方式打开html格式文件

postMessage

postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe+postMessage 跨域通信 主页面</title>
</head>
<body>
    <h1>主页面</h1>
    <iframe id="child" src="./iframepage.html" frameborder="1" height="300"></iframe>
    <div>
        <h2>主页面接收消息区域</h2>
        <span id="message"></span>
    </div>
    <script>
        window.onload = function () {
            let iframe = document.querySelector('#child').contentWindow.postMessage('从主页面传递的消息', 'http://127.0.0.1:5501/iframepage.html');
        }
        window.addEventListener('message', function(event){
            document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
        }, false);
    </script>
</body>
</html>

iframepage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iframe+postMessage跨域通信 子页面</title>
</head>
<body>
    <h2>子页面</h2>
    <div>
        <h3>接收消息区域</h3>
        <span id="message"></span>
    </div>
    <script>
        window.addEventListener('message', (event) => {
            // console.log(event);
            document.querySelector('#message').innerHTML = '' + event.origin + '消息内容：' + event.data;
            top.postMessage("从子页面传递的数据", 'http://127.0.0.1:5501/main.html')
        }, false);
    </script>
</body>
</html>