跨域postmesssage

最新推荐文章于 2024-07-24 16:53:23 发布

瓜子壳、

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量140

点赞数

文章标签： html

本文链接：https://blog.csdn.net/m0_70613012/article/details/133715821

版权

postMesssage

postMessage是一种HTML5提供的方法，它基于事件的消息传输API，可以用于实现跨文本档、多窗口、跨域消息传递。

当页面使用跨域iframe链接时，主页面与子页面是无法交互的，这对页面间的信息传递造成了不小的麻烦。使用postMessage方法可以解决这个问题。

跨域postMesssage测试

首先在Linux中搭建服务器环境，创建两个域名网站并配置两个host文件

子页面和主页面的html代码

//子界面
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123456</title>
</head>
 
<body>
    <div>
        <h1>123456</h1>
    </div>
</body>
 
<script>
    console.log(document.cookie);
</script>
 
</html>

//主界面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qwer</title>
</head>
<body>
    <iframe id="myIframe" src="http://www.lesson2.com/index.html" frameborder="2"></iframe>
</body>
<script>
    document.cookie = "cookie=root";
</script>
</html>

未获取到主页面的Cookic，原因是跨域是无法直接获取到Cookic

postMesssage

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>123456</title>
</head>
 
<body>
    <div>
        <h1>123456</h1>
    </div>
</body>
 
<script>
    window.addEventListener('message', (event) => {
        console.log(event)
        if (event.origin === 'http://www.lesson1.com') {
            const cookieData = event.data;
            //处理cookieData
            console.log('Receive message from parent:', cookieData);
            window.parent.postMessage('child message', '*');
        }
    })
</script>
 
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>qwer</title>
</head>
<body>
    <iframe id="myIframe" src="http://www.lesson2.com/index.html" frameborder="2"></iframe>
</body>
<script>
    window.onload = function() {
        document.cookie = 'sessionid=root'
        const cookieData = document.cookie
        window.frames[0].postMessage(cookieData, 'http://www.lesson2.com/');
    }
    window.addEventListener('message', (event) => {
        if(event.origin === 'http://www.lesson2.com')
        console.log('Received message from child:', event.data);
    })
</script>
</html>