页面跨域与iframe通信(Blocked a frame with origin)

        项目中有个需求是在前后端分离的情况下，前台页面将后台页面加载在预留的iframe中；但是遇到了iframe和主窗口双滚动条的情况，由此引申出来了问题：

　　只保留单个滚动条，那么就要让iframe的高度自适应，而从主页面显然直接取不到iframe的值，因为这是跨域的（前台页面与后台页面不在同一个IP地址或者同一个端口），尝试访问会报错：

　　Blocked a frame with origin "http://7.35.0.8:8080" from accessing a frame with origin "http://7.35.0.9:8080".Protocols, domains, and ports must match.

　　

　　这本质上是跨域问题

　　解决跨域问题的方法大致有以下几种

　　1.jsonp   

　　2.hash

　　3.postMessage

　　4.websocket

　　5.cors 

　　具体的使用方式和原理的文章有很多，而就应用场景而言，iframe间通信最完美的办法莫过于postMessage了。

　　postMesasge是html5标准的方法，ie10+浏览器都支持，ie8/9部分支持。以下是部分实例：

//主页面 向 iframe传递事件

//主页面

var frame = document.getElementById('iframeId');

// postMessage接收两个参数，第一个表示信息，可以传递字符串或者对象，我用的对象。refresh 是目标页面监听事件的key,对象内可以传递多个key;第二个参数表示目标源，*表示所有，但不安全，建议使用具体地址

frame.contentWindow.postMessage({refresh：'id'},'*'); 

//iframe页面
window.addEventListener('message',function(event){
　　// event.origin --发送者的源
　　// event.source --发送者的window对象
　　// event.data --数据
　　if(event.data.refresh){
　　　　//此处执行事件

   }

})

 

//iframe向主页面传递事件

//iframe页面
window.parent.postMessage({refresh:'id'},'*');

//主页面
window.addEventListener('message',,function(event){
     if(event.data.refresh){
　　　　//此处执行事件

    }

})

 新开页面时也能用这个方式向父页面传递事件（ie8/9不支持）

window.opener.postMessage({refresh:'some message'},'*')

　　

转载于:https://www.cnblogs.com/syll/p/8640329.html