zoukankan      html  css  js  c++  java
  • 如何在父页面中操作/获取iframe页面中的元素?这个小问题折腾了我快半个小时,所以记下来吧!

    例如父页面代码如下:

    <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();
  • 相关阅读:
    短链设计
    .NET Core .NET标准REST库Refit
    .net core 实现动态 Web API
    Visual Studio 2013 Web开发
    .Net 跨平台可移植类库PCL可用于任何平台包括Mono
    Jexus 支持PHP的三种方式
    单元测试模拟框架:Nsubstitute
    开发便于运维的Windows服务
    搭建Linux+Jexus+MariaDB+ASP.NET[LJMA]环境
    在Linux和Windows平台上操作MemoryMappedFile(简称MMF)
  • 原文地址:https://www.cnblogs.com/4AMLJW/p/sdoiufosdfojo20200605115311.html
Copyright © 2011-2022 走看看