zoukankan      html  css  js  c++  java
  • 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();

  • 相关阅读:
    mysql、mongodb、redis区别
    Redis面试题
    【开发提效】开发提效技巧
    【代码规范】16条军规
    mysql数据库连接字符串
    mysql数据库连接字符串
    好用的api接口
    node + express + vue
    跨源资源共享(CORS)
    fehelper
  • 原文地址:https://www.cnblogs.com/Eeexiang/p/8920774.html
Copyright © 2011-2022 走看看