最近在做一个项目,要在当前页面调用其他网站页面,并做数据交互,由于两个页面不在同一个站点下,
常用的页面通信方式就会因跨域问题而导致失败
各种翻资料,终于找到了解决跨域问题的方法,通过postMessage发送消息,相应的页面进行消息监听,监听到正确消息后再执行操作
下面做一个简单代码示例
子页面js
<script type="text/javascript">
$("#id1").click(function() {
var fun="click"; // 传递的信息
window.parent.postMessage(fun, '*'); // 向父页面推送消息
// window.parent.postMessage(fun, 'http://example.com'); // 向指定页面推送消息
})
</script>
父页面js
// 监听消息
window.addEventListener('message', function(e) {
console.log(e);
var fun = e.data;
if (fun == "click") {
alert("aaa");
}
}, false);