window.postMessage 是一种跨文档通信的方法，允许来自一个文档（例如一个网页或Iframe）向另一个文档发送消息。这在Iframe中使用尤其有用，因为它允许父页面和Iframe之间的安全通信。实例中在父页面点击按钮弹出子页面窗口，子页面窗口关闭后需要传递参数到父页面。

父页面

window.addEventListener('message', function(event) {

if (event.data.action === 'dataFromChild') {

var id = event.data.id;

var sn = event.data.sn;

var name = event.data.name;

var price = event.data.price;

var thumb = event.data.thumb;

// 处理资料

console.log(id);

}

}, false);

子页面

$(".sel").click(function(){

var id = $(this).data("id");

var name = $(this).data("name");

var sn = $(this).data("sn");

var price = $(this).data("price");

var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

window.parent.postMessage({ action: 'dataFromChild', id: id, sn: sn, name: name, price:price, thumb:thumb }, '*');

var thumb = $(this).data("thumb");

parent.layer.close(index); // 关闭layer

})

'; $mask = $(divstr).appendTo($main); if(layerinfixed) $('#'+layerid+'-mask').css('position','fixed'); } // Mask close $mask.bind(mclick, function(e){ if ($(e.target).closest('nav.mtree').length) return; $('>.mask-close', this).triggerHandler(mclick); }).children('.mask-close').bind(mclick, function(){ $btnspan.addClass("expand"); $mask.remove(); }); // Load menu var $mtree = $('').appendTo($mask); var mtreemheight = $(window).height() - $('#mphone_btmnav').height() - 25; $mtree.find('ul').css({'max-height':mtreemheight+'px','overflow-y':'auto'}); //是否存在子菜单 var cwidth = ($mask.find('nav.mtree > ul > li.haschild').length == 0)?0:23; var setawidth = function(dom){ var $li = $(dom),$mtitle = $li.children('a.mtitle');if ($mtitle.hasClass("hadid")) return; var maxwidth = $li.width(),apadlt = $._parseFloat($mtitle.css("paddingLeft")) + $._parseFloat($mtitle.css("paddingRight")); $mtitle.css('float','none'); var titleoffset=$mtitle.data('linkoffsetpos'); if(!titleoffset){ titleoffset=$mtitle.outerWidth()+$mtitle.offset().left- $li.offset().left; $mtitle.data('linkoffsetpos',titleoffset); } $mtitle.css('float',''); if($li.css('text-align')=='center')cwidth=0 if($li.hasClass('haschild')&&$li.css('text-align')!='left'){ $mtitle.addClass("hadid").width(maxwidth - apadlt - cwidth); }else{ if(!$li.hasClass('haschild')){ $mtitle.addClass("hadid").width(maxwidth - apadlt - cwidth); }else{ $mtitle.css('float','none'); } } if($li.find('.domtoggle').length){ var toggleleft=titleoffset+2; var toggleow=23; var togglew=$li.children('span.submenu-toggle').width(); if(toggleleft>maxwidth-toggleow){ toggleleft=maxwidth-toggleow; }else{ togglew+=maxwidth-toggleleft-2; } $li.find('.domtoggle').css({'top':0,'left':toggleleft,'width':togglew}).css({'visibility':'visible','overflow':'hidden'}); } $li = $mtitle = maxwidth = apadlt = null; }; $mask.find('nav.mtree > ul > li').each(function(i, node){setawidth(this)}); // Bind event $mtree.find('div.domtoggle').bind(mclick, function(e){ var $span = $(this),$parent = $span.parent('li.haschild'), event = effect = '',islocal = false; // 收起同辈菜单项 var $slocal = $parent.siblings('li.haschild').children('div span.local'); $slocal.length && $slocal.trigger(mclick); // 展开当前菜单项 if ($span.hasClass("local")) { islocal = true; event = 'slideUp';effect = 'removeClass'; $parent.find('ul.submenu')[event](); $parent.find('li.haschild,span.submenu-toggle')[effect]("local"); $parent.find('li.haschild div,span.submenu-toggle')[effect]("local"); } else { event = 'slideDown';effect = 'addClass'; $parent.css("height", 'auto'); } $span.add($parent)[effect]("local"); $span.find('span').add($parent)[effect]("local"); $span.next("ul.submenu")[event]("normal", function(){ if (islocal) $parent.css("height", ''); else $('> li', this).each(function(i, node){setawidth(this)}); }); }); }); $(document).unbind('touchstart').bind('touchstart', function(event) { var $mtree = $('#scroll_container').find('#'+layerid+'-mask .mtree'); (function(win){win.mnavbarbarscroll=function(){return $mtree.is(':visible')}})(window); }) $(document).unbind('touchmove').bind('touchmove', function(event) { var $mtree = $('#scroll_container').find('#'+layerid+'-mask .mtree'); (function(win){win.mnavbarbarscroll=function(){return $mtree.is(':visible')}})(window); }) })