页⾯跨域与iframe通信（Blockedaframewithorigin）项⽬中有个需求是在前后端分离的情况下，前台页⾯将后台页⾯加载在预留的iframe中；但是遇到了iframe和主窗⼝双滚动条的情况，由此引申出来了问题：
  只保留单个滚动条，那么就要让iframe的⾼度⾃适应，⽽从主页⾯显然直接取不到iframe的值，因为这是跨域的（前台页⾯与后台页⾯不在同⼀个IP地址或者同⼀个端⼝），尝试访问会报错：
  Blocked a frame with origin "7.35.0.8:8080" from accessing a frame with origin "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 = ElementById('iframeId');
// postMessage接收两个参数，第⼀个表⽰信息，可以传递字符串或者对象，我⽤的对象。refresh 是⽬标页⾯监听事件的key，对象内可以传递多个key；第⼆个参数表⽰⽬标源，*表⽰所有，但不安全，建议使⽤具体地址tWindow.postMessage({refresh：'id'},'*');
//iframe页⾯
window.addEventListener('message',function(event){
iframe参数传递
  // igin --发送者的源
  // event.source --发送者的window对象
  // event.data --数据
  if(fresh){
    //此处执⾏事件
}
})
//iframe向主页⾯传递事件
//iframe页⾯
window.parent.postMessage({refresh:'id'},'*');
//主页⾯
window.addEventListener('message',,function(event){
if(fresh){
    //此处执⾏事件
}
})
新开页⾯时也能⽤这个⽅式向⽗页⾯传递事件（ie8/9不⽀持）
window.opener.postMessage({refresh:'some message'},'*')

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。