小tips:postMessage处理iframe跨域通信

前端开发 作者: 2024-08-20 18:35:01
实例 父页面发消息给子页面,子页面接收消息后回复父页面。 父页面代码: <body> 父级页面: <button id="btn">给iframe子页面传递
<body>
    父级页面:
    button id="btn">给iframe子页面传递消息button</button>
    iframe src="index2.html" id="iframe1"></iframescript>
        var btn = document.getElementById('btn);
        btn.addEventListener(click,function() {
             data  {
                message: 子页面应该接收的消息
            }
            // 给子页面发送消息
            document.getElementById(iframe1).contentWindow.postMessage(data,1)">"/);
        },1)">false);
        
         接收子页面传递的消息
        window.addEventListener(message(e) {
            console.log(e.data);  父页面:我接收到消息了
        },1)">);
    >
>
script type="text/javascript">
     接收父页面发送的内容
    window.addEventListener((e) {
        console.log(e.data)  {message: "子页面应该接收的消息"}
        
         接收内容后,我们也可以给父页面发消息
        window.parent.postMessage(父页面:我接收到消息了);
    },1)">);
>
  • data 包含任意字符串数据,由原始脚本发送
  • origin 一个字符串,包含原始文档的方案、域名以及端口(如:http://domain.example:80)
  • lastEventId 一个字符串,包含了当前的消息事件的唯一标识符。
  • source 原始文件的窗口的引用。更确切地说,它是一个WindowProxy对象。
  • ports 一个数组,包含任何MessagePort对象发送消息。
// 接收父页面发送的内容
    window.addEventListener('message',function(e) {
        console.log(e)
    },false);
  • message:发送的数据
  • targetOrigin: 发送数据的来源
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65660.html