脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → iframe跨域postMessage

父页面iframe中的第三方子页面跨域交互技术—postMessage实现方法

 更新时间：2023年06月17日 11:27:05   投稿：yin  
web网站通过iframe嵌入第三方web页面，父页面和子页面如果需要数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的JavaScript脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递...

在web项目中通过iframe嵌入另一个第三方web项目，第三方web项目里点击某个按钮要实时调用web项目的全局函数打开某个全局弹窗或者进行路由跳转，这时候两个项目存在了数据交互，显然违反了同源策略，在HTML5标准引入的window对象下的postMessage方法，可以允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。

window.postMessage是HTML5中新增的一个API（不能低于IE8）,postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信 ,使其可以实现跨文本档、多窗口、跨域消息传递，这个API为 window 对象新增了一个window.postMessage方法，允许跨窗口通信，无论当前两个窗口否是同源。

postMessage传递消息

在 html5，window 对象上有一个方法叫做postMessage，与它的名字一样，这个方法就是用来发送信息的，但是它只能用来在两个窗口之间发送信息

发送消息方法的参数和使用

win.postMessage(data, origin)
// win 这个参数为需要接受消息的 window 对象
// 当我们通过 window.open() 打开一个新窗口时，会返回一个新窗口的 window 对象，通过这个新窗口的 window 对象，就可以向新窗口发送消息
// 如果页面中有 frame 时，也可以通过这个 frame 对象发送消息
// data 为我们想要发送的数据，理论上 data 可以是任何可以被复制的数据类型，但是由于部分浏览器只支持传输 String 类型，所以传输的数据最好是通过 JSON.stringify() 序列化后再传输
// origin 为字符串，为目标窗口的源，由 协议+ip/域名+端口号 组成
// 如果想要传递给任意窗口，可以将这个参数设置为 * ，为了安全起见，不建议设置为 *
// 如果目标窗口与当前窗口同源，则设置为 /

接收消息方法的参数和使用

window.addEventListener('message', function (e) {...})
// 第一个参数为这个事件监听器的类型，'message' 表示会监听当前窗口接收到的消息
// 第二个参数为接收到消息后的回调函数，在回调函数中，我们可以对发送消息的源进行一些验证，从而保证安全性
// 回调函数参数 e 上有很多属性，我们可以将其打印出来，其中 origin 表示发送消息窗口的源；source 属性表示发送消息的窗口，通过 e.source == window.opener 可以判断发送消息的窗口与打开当前页面的窗口是否为同一个；data 属性标书传递过来的数据

使用场景

当想要在Web页面中嵌入一个来自其他站点的模块或者“gadget”的时候，利用 postMessage() 和 message 事件实现的跨域消息传递是很有用的。

首先 gadget 的开发者可以将 gadget 内容定义在一个 HTML 页面中，它负责监听 message 事件，并将它们分发给对应的 js 函数去处理。然后，嵌入 gadget 的Web页面就可以通过 postMessage() 方法传递消息来和 gadget 进行交互了。

使用示例

加入有a.html和b.html两个页面，a.html是父页面，b.html是子页面，可以是同源同一个网站（网址一样），也可以是不同源的跨域网站。

父级页面给子级页面传参

//a.html
<body>
    <div class='body'>
        <div class='left'>
            <p>LEFT</p>
            <button id='iframeEvent'>给子级页面传参</button>
        </div>
        <div class='right'>
            <iframe id='ifrA' src="b.html" frameborder="0" 
            width='100%' height='100%'></iframe>
        </div>
    </div>
    <script>
        var ifr = document.getElementById('ifrA');
        var send = document.getElementById('iframeEvent');
        //父级页面发送参数
        send.addEventListener('click', function() {
            var url = 'http://127.0.0.1:5500/b.html';//地址必须为服务器地址（本地文件打开无效）
            var val = '我是父级页面过来的参数';//传递的参数
            ifr.contentWindow.postMessage(val, url)
        }, false)
    </script>
</body>
//b.html
<body>
    <p class='title'>我是子级页面</p>
    <script>
        window.addEventListener('message', function(event) {
            var url = 'http://127.0.0.1:5500';//指定的源
            if (event.origin != url) {//判断是否来自指定源
                return;
            }
            console.log(event.data);//读取传递过来值
        }, false)
    </script>
</body>

子级页面给父级页面传参

//a.html
<body>
    <div class='body'>
        <div class='right'>
            <iframe id='ifrA' src="b.html" frameborder="0" 
            width='100%' height='100%'></iframe>
        </div>
    </div>
    <script>
        //接送参数
        window.addEventListener('message', function(e) {
            var url = 'http://127.0.0.1:5500';
            if (e.origin != url) {
                return;
            }
            console.log(e.data);
        }, false)
    </script>
</body>
//b.html
<body>
    <button class='childPage'>给父页面传递参数</button>
    <script>
        //发送子级页面的参数给父级页面
        var btnEvent = document.querySelector('.childPage');
        var data = '我是子级页面传递过来的参数';
        btnEvent.addEventListener('click', function(e) {
            window.parent.postMessage(data, 'http://127.0.0.1:5500/a.html')
        }, false)
    </script>
</body>

安全问题

如果你不希望从其他网站接收 message，请不要为 message 事件添加任何事件监听器。
如果你确实希望从其他网站接收message，请始终使用 origin 和 source 属性验证发件人的身份。
当你使用 postMessage 将数据发送到其他窗口时，始终指定精确的目标 origin，而不是 *。

兼容性

所有主流浏览器（包括IE8）都支持。

到此这篇关于父页面iframe中的第三方子页面跨域交互技术—postMessage实现方法的文章就介绍到这了,更多相关iframe跨域postMessage内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论