postMessage()实现跨域

来源：互联网发布：网络诈骗如何举报网站编辑：程序博客网时间：2024/05/16 02:09

postMessage()方法简介

它是window方法，允许来自非同源脚本调用，通过异步消息传递的方式，允许有限的通信。它在HTML5标准中定义，且所有主流浏览器都实现该通信机制，这项技术称为“跨文档消息传递”，又称“窗口间消息传递”或“跨域消息传递”。

postMessage()调用

它接受两个参数，第一个是要传递的消息，第二个指定目标窗口的源（可以传递一个完整的URL，但是除了协议，端口，主机名之外的信息都会被忽略）。

相应的事件处理程序message

目标窗口的window对象会触发message事件，该事件会收到一个参数，这个参数由如下属性

data，表示消息内容的副本；
source，消息源的window对象；
origin，指定消息来源（url的形式）；

下面是两个不同域下的消息传递：

www.script.newdomain.com/

<script>    window.addEventListener('message',function(event){        if(event.origin=="http://www.newdomain.com"){            localStorage.message=event.data;            //这里可通过多种方式保存获取的event.data;        }    },false);    console.log(localStorage.message); //输出 Domain1 sends message to Domain2;</script>

www.newdomain.com/

<html>    <body>        <iframe id="ifr" src="http://www.script.newDomain.com/newDomain2/test.html"></iframe>    </body>    <script>        window.onload=function(){            var ifr=document.getElementById('ifr');            ifr.style.display="none";            var targetOrigin="http://www.script.newDomain.com";            ifr.contentWindow.postMessage('Domain1 sends message to Domain2',targetOrigin);        }    </script></html>

0 0