• iframe多窗口


    Window 对象 

      浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览器就会为原始文档创建一个 window 对象,再为每个框架创建额外的 window 对象。这些额外的对象是原始窗口的 子窗口,可能被原始窗口中发生的事件所影响。例如,关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口(以及对应的 window 对象),可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。

    contentWindow 属性

      contentWindow属性是指指定的frame或者iframe所在的window对象

      var ifr = document.getElementById("iframe");  
      var contentWindow = ifr.contentWindow.document.getElementById("XXXXX");
      
      contentWindow.method();
      在iframe页面操作父页面DoM元素(即嵌套这个iframe的页面)可以用:  
      window.parent.  
      
      window.top.  (这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用)

    ===========================================================
     1 /**
     2 * 人员选择
     3 * @param fieldName 字段名称(同时也是回显控件的ID)
     4 * @param type 控件类型(1:单选, 2: 多选)
     5 * */
     6 function userSelect(fieldName, type, callback) {    
     7 layer.open({
     8 type: 2  //此处以iframe举例
     9 , title: "选择用户"
    10 , area: ['800px', ($(window).height())+'px']
    11 , shade: 0
    12 , offset:'rb',
    13 scrollbar: false,
    14 shade:0.5,
    15 shift: 2,
    16 fixed:false,
    17 resize:false,
    18 scrollbar:true,
    19 move:false
    20 , maxmin: false
    21 , content: 'appDataController.do?userSelect&type='+type    //(url)
    22 , zIndex: layer.zIndex //重点1
    23 , success: function (layero) {
    24 layer.setTop(layero); //重点2
    25 }
    26 , btn: ['确定']
    27 , yes: function(index){
    28 
    29 //  获得iframe的窗口对象
    30 var child = 'layui-layer-iframe'+index;
    31 $child = $("#"+child)[0].contentWindow;
    32 
    33 //  调用iframe的方法
    34 var data = $child.getUser();
    35 callback(fieldName, data);
    36 layer.close(index);
    37 }
    38 });
    39 }

    另外一种layer,父子页面交互

    var child = 'layui-layer-iframe'+index;
    $child = $("#"+child)[0].contentWindow;
    var data = $child.submit();

    还有一个  

    var iframeWin = window[layero.find('iframe')[0]['name']];
    iframeWin.resetSelect();

  • 相关阅读:
    UI进阶--控制器View的创建流程以及生命周期方法
    UI进阶--程序启动原理和UIApplication
    UI进阶--常见的项目文件介绍
    浅析 KVO 内部实现
    浅析 Get 和 Post 的区别
    C++实现进制转换
    UIBlurEffect 毛玻璃特效实现
    UITableView左滑显示选择
    排序算法(OC实现)
    valid Palindrome -- leetcode
  • 原文地址:https://www.cnblogs.com/Eeexiang/p/8920774.html
Copyright © 2020-2023  润新知