今天在写一个模块,里面有一个功能是在弹出的子页面中输入一些数据,然后在点击确认之后关闭子页面,把输入的这些数据再回显到之前的父页面上面。这里是用layer弹层组件,弹出一个iframe页面做的。研究了很久才弄明白。
如下父页面的相关代码
//父页面 //click事件点击进入一个iframe页面(子页面) $(".relation").click(function() { // 是否是指派页面 window.IspPoint = false; parent.layer.open({ type : 2,//弹窗类型 ['dialog', 'page', 'iframe', 'loading', 'tips'] area : [ '610px', '320px' ], shift : 2,//可选动画类型0-6 scrollbar : false, title : false, closeBtn : false, content : "address.html", btn: ['确定','取消'], //这里yes:function为设置的第一个按钮的function,后面设置的按钮默认点击关闭 yes:function(index,layero){ //需要回显的值 //layero为当前的DOM对象,去找打开的iframe转成DOM对象调用子页面其中的function (callbackdata) var res = $(layero).find("iframe")[0].contentWindow.callbackdata(); //把回显的值赋给需要显示的地方 $("#name").val(res.data_name); $("#id").val(res.data_id); //关闭子页面 parent.layer.close(index); });
如下子页面的相关代码
/*子页面 回显data */ var callbackdata = function () { var id = ""; var name = ""; //我这里循环拿取li列表的data中所有name和id for(var z = 0 ;z< length ;z++){ if(0 != z){ pk += ","; name += ","; } name = name + $('.address-right').find('li').eq(z).data('name'); id = id + $('.address-right').find('li').eq(z).data('id'); } //data里面可以存放很多需要回显的数据,在父页面调用这个function即可拿到data里面的数据达到回显的效果 data ={ data_name : name, data_id : id }; //function返回一个data值,达到回显数据效果 return data; }