JBox的父页面获取iframe中的元素值

最新推荐文章于 2019-02-13 12:31:54 发布

Sherry__Han

最新推荐文章于 2019-02-13 12:31:54 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： JS

本文链接：https://blog.youkuaiyun.com/Sherry__Han/article/details/86668947

版权

js 专栏收录该内容

3 篇文章

订阅专栏

子页面（jbox中的页面）部分代码：

<form:form id="addLineForm" modelAttribute="hfsjProductLine">
	<div style="padding-top:5%;padding-left: 20%;padding-right: 10%">
		<table style="width: 100%">
			<tr>
				<td>启用时间：</td>
				<td>
					<input name="buildDate" id="time" style="margin-bottom: 0px" type="text" maxlength="20" class="input-medium Wdate"
						   onclick="WdatePicker({dateFmt:'yyyy-MM-dd',minDate:'%y-%M-%d',isShowClear:false});"/>
				</td>
			</tr>
			<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
			<tr>
				<td>生产线编号：</td>
				<td>
					<input id="code" style="margin-bottom: 0px" type="text" data-toggle="tooltip" data-placement="top" title="已存在${existLineCode}生产线"/>
				</td>
			</tr>
			<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
			<tr>
				<td>负&nbsp;责&nbsp;人：</td>
				<td>
					<input id="leader" style="margin-bottom: 0px" type="text"/>
				</td>
			</tr>
			<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
			<tr>
				<td>生产线类型：</td>
				<td>
					<form:checkboxes name="type" path="type" items="${fns:getDictList('product_type')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
				</td>
			</tr>
			<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
			<tr>
				<td>班&nbsp;组&nbsp;长：</td>
				<td>
					<input id="squadLeader" style="margin-bottom: 0px" type="text"/>
				</td>
			</tr>
			<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
			<tr>
				<td>备注说明：</td>
				<td>
					<textarea id="remarks" textarea cols="3" rows="2"></textarea>
				</td>
			</tr>
		</table>
	</div>
</form:form>

父页面代码：

 function addLine(){
            top.$.jBox.open("iframe:${ctx}/product/hfsjProductLine/form","生产线管理",500,500,
                {
                    draggable:true,
                    persistent: true,
                    buttons: { '提交': 1, '取消': 0 },
                    submit: function (v, h, f) {
                        if(v==1){
                            var jboxObj = h.find("iframe")[0].contentWindow;
                            //获得生产线编号
                            var lineCode=jboxObj.code.value;
                            //获得创建日期
                            var buildDate=jboxObj.time.value;
                            //获得负责人
                            var leader=jboxObj.leader.value;
                            //获得生产线类型
                            var typeList= $(jboxObj.document).find("input[name='type']:checked");
                            var type = [];
                            for(var i=0;i<typeList.length;i++){
                                var input=typeList[i];
                                type.push(typeList[i].value)
                            }
							console.log("===============>"+type.toString())
                            //获得班组长
                            var squadLeader=jboxObj.squadLeader.value;
                            //获得备注
                            var remarks=jboxObj.remarks.value;

                            var data = {"lineCode":lineCode,"buildDate":buildDate,"leader":leader,
										"type":type.toString(),"squadLeader":squadLeader,"remarks":remarks}
                            var url = "${ctx}/product/hfsjProductLine/addLine";
                            console.log("____________:"+data);
                            $.ajax({
                                type: 'POST',
                                url : url,
                                data: data,             //获取表单数据
                                async:false,
                                success : function(data) {
                                    if (data=="OK") {
                                        window.location.href="${ctx}/product/hfsjProductLine";              //调用父窗体方法，当关闭子窗体刷新父窗体
                                        top.jBox.tip("添加成功!");
                                    } else {
                                        window.location.href="${ctx}/product/hfsjProductLine";
                                        top.jBox.tip("添加失败!");
                                    }
                                }
                            });
                            self.location.reload(); // 主窗口刷新
						}
                    },
                    loaded:function(h){
                        $(".jbox-content", top.document).css("overflow-y","hidden");
                    }
                });

        }

重点：

var jboxObj = h.find("iframe")[0].contentWindow;
//获得生产线编号
var lineCode=jboxObj.code.value;
//获得创建日期
var buildDate=jboxObj.time.value;
//获得负责人
var leader=jboxObj.leader.value;
//获得生产线类型
var typeList= $(jboxObj.document).find("input[name='type']:checked");

其中code、time、leader分别对应iframe表单中的标签id。

h.find("iframe")[0].contentWindow表示获得当前JBox对象

详情解说见：https://blog.youkuaiyun.com/baidu_30809315/article/details/80929427

此链接中的方法---表单序列化，有点问题：https://blog.youkuaiyun.com/geniusbluesky/article/details/77527376