一个简单的postMessage实例

最新推荐文章于 2024-03-13 14:32:04 发布

星海拾遗

最新推荐文章于 2024-03-13 14:32:04 发布

阅读量1.1k

点赞数

分类专栏：生命不息，填坑不止

本文链接：https://blog.csdn.net/qq_38280242/article/details/104513510

版权

生命不息，填坑不止专栏收录该内容

47 篇文章 1 订阅

订阅专栏

跨文档消息传送（cros-document Message），指的是在不同域的页面间传递消息。

以下是我用webstorm测试的使用postMessage在iframe和父级之间传参。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        iframe{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>

<iframe src="http://localhost:63342/JQuery%E5%95%86%E5%9F%8E%E5%AE%9E%E4%BE%8B/iframe.html?_ijt=jrpcgmgcep8n6ppfh53s3fcttm" frameborder="1"></iframe>




<script>
    console.log(window.location)
    let iframe = document.querySelector("iframe")
    iframe.onload=function () {
        setTimeout(function () {
            iframe.contentWindow.postMessage('WXS','http://localhost:63342')
        },1000)
    }

    window.addEventListener("message",function (res) {
        console.log(res)
    })

</script>
</body>
</html>

但我发现这种方法好像并不能跨域，子父页面必须要在同域之下。即相同的协议（http），相同的域名（www.locaolhost），相同的端口号（63342）

星海拾遗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个简单的postMessage实例

跨文档消息传送（cros-document Message），指的是在不同域的页面间传递消息。以下是我用webstorm测试的使用postMessage在iframe和父级之间传参。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title...
复制链接

扫一扫

专栏目录