跨iframe通信：jQuery与postMessage结合

利用jQuery的事件系统封装postMessage API，实现父页面与iframe之间的安全双向通信及同步回调。 · 难度：入门 · +10XP

跨iframe通信：jQuery与postMessage结合

多数教程只讲同页面jQuery，很少涉及跨域iframe。本教程教你如何包装postMessage，使得在父页面中通过触发jQuery自定义事件（如$window.trigger('message:fromChild', data)）来接收子iframe传来的数据，并且支持回调。同时过滤消息来源（origin校验），以及用$.Deferred包装请求-响应模式：父页面发消息给子iframe，子iframe处理后返回，父页面通过promise获取结果。

// 父页面发送消息并等待回复
function sendToIframe(msg) {
  var dfd = $.Deferred();
  var handler = function(e) {
    if (e.originalEvent.data.type === 'response') {
      $(window).off('message', handler);
      dfd.resolve(e.originalEvent.data.payload);
    }
  };
  $(window).on('message', handler);
  $('#myIframe')[0].contentWindow.postMessage(msg, '*');
  return dfd.promise();
}