如何在父页面中操作/获取iframe页面中的元素？这个小问题折腾了我快半个小时，所以记下来吧！

Posted 2020-12-09 向着阳光漫步

例如父页面代码如下：

<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();