例如父页面代码如下:
<div class="container-fluid" style="background-color: #eee;"> <div class="row-fluid"> <div class="span12"> <div class="shadowbg panel-wrapper"> <div class="shadowbg-1"> <div class="shadowbg-2"> <div class="panel" style="height:370px;"> <div class="panel-header"> <div class="crumbs"> <button id="tabName_project" class="tabName" onclick="clickFunction(1)">项目</button> <button id="tabName_object" class="tabName" onclick="clickFunction(2)">对象</button> <button id="tabName_task" class="tabName" onclick="clickFunction(3)">任务</button> </div> </div> <iframe id="contentFrame" name="contentFrame" frameborder="0" src="" scrolling="no" width="100%" height="100%"> </iframe> </div> </div> </div> </div> </div> </div> </div>
由上代码可知,父页面中包含了一个<iframe>子页面。
但是需求中需要在父页面操作(获取)iframe页面中的元素(例如修改某个div的样式、获取某个input的值等等)。
解决的办法如下所示:
//确认 function queryInfo(){ var buttonType = $("#buttonType").val(); var type = $("#type").val(); if(type == "projectT"){ if(buttonType == "radio"){ //获取当前选项的id var rowData =window.frames['contentFrame'].$('#componentTable').jqGrid('getGridParam','selrow'); }else{ //获取多选选项的id数组 var rowData = window.frames['contentFrame'].$("#componentTable").jqGrid("getGridParam", "selarrrow"); } if (!dataIsExist(rowData)) { alert('请先选择要查询的选项'); return; } rowData = rowData + ""; $.ajax({ type: "post", url: "<c:url value='/ajax'/>", data: { service: "com.shd.biz.commonComponent.demo.service.DemoService", method: "getProjectInfos", params: [rowData] }, success:function(data){ window.close(); returnResult(data.stringValue); }, dataType:"json" }); } }
就这么简单的一句:
window.frames['IFrameId'].$('#XXXX').val();