JQuery 操作弹出层 iframe页面元素的方式

一、问题描述：如下图，在某个页面弹出一个iframe页面A，再在A弹出一个iframe页面B，需要操作这个B页面的元素

（一）图述

                                                            图1

（2）A页面的弹出方法，其中simpleDialog是封装好的JS框架方法，不主动改变页面结构

 $('.task_edit').live("click",function(){
            var id = $(this).parent().find("input").val();
            top.$().simpleDialog({
                iframe: true,
                animate: false,
                modal: true,
                iframeUrl: 'keyWorkTaskEdit.action?id='+id,
                id: "update-pa",
                title:"任务分配",
                buttons: {
                    '关闭': closeU,
                    '确定': function(){
                        callbackForEdit();
                    }
                }
            });
});

 

二、页面结构分析如下

　　　　　　　　　　　　　　　　图2 页面结构

 

三、处理方法：从图2 可以看出这弹出的两个iframe和原页面都是处于同级的，因此操作方法如下(代码片段)

关键点：在于分析页面总体结构，并找到相应iframe的父级页面即找到最顶层的document，并转化为JQuery对象——$(parent.window.document)，从而操作之

//操作iframe——A

 var form=$(parent.window.document).find("#update-pa").find("#xqframe").contents().find("#taskForm");

var isCheck=allValidate(form);

//操作iframe——B
$(parent.window.document).find("#subDialog").find("#xqframe").contents().find("tbody").find("input:checkbox").each(function() {
    if ($(this).attr("checked") == true) {
    var val = $(this).parent().parent().parent().find("td:eq(1)").find('input').val();
    if (i == 0) {
            name = val;
    } else {
            name = name + "," + val;
        }
            i++;
        }
});