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

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

（一）图述

                                                            图1

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

 1  $('.task_edit').live("click",function(){
 2             var id = $(this).parent().find("input").val();
 3             top.$().simpleDialog({
 4                 iframe: true,
 5                 animate: false,
 6                 modal: true,
 7                 iframeUrl: 'keyWorkTaskEdit.action?id='+id,
 8                 id: "update-pa",
 9                 title:"任务分配",
10                 buttons: {
11                     '关闭': closeU,
12                     '确定': function(){
13                         callbackForEdit();
14                     }
15                 }
16             });
17 });

 

二、页面结构分析如下

　　　　　　　　　　　　　　　　图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++;
        }
});

 

 

转载于:https://www.cnblogs.com/zmc330/archive/2012/05/10/2494060.html