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的时候使用)
===========================================================
 /**
* 人员选择
* @param fieldName 字段名称(同时也是回显控件的ID)
* @param type 控件类型(1:单选, 2: 多选)
* */
function userSelect(fieldName, type, callback) {
layer.open({
type: //此处以iframe举例
, title: "选择用户"
, area: ['800px', ($(window).height())+'px']
, shade:
, offset:'rb',
scrollbar: false,
shade:0.5,
shift: ,
fixed:false,
resize:false,
scrollbar:true,
move:false
, maxmin: false
, content: 'appDataController.do?userSelect&type='+type //(url)
, zIndex: layer.zIndex //重点1
, success: function (layero) {
layer.setTop(layero); //重点2
}
, btn: ['确定']
, yes: function(index){ //  获得iframe的窗口对象
var child = 'layui-layer-iframe'+index;
$child = $("#"+child)[].contentWindow; //  调用iframe的方法
var data = $child.getUser();
callback(fieldName, data);
layer.close(index);
}
});
}

另外一种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();

上一篇:Caffe、TensorFlow、MXnet三个开源库对比+主流分类模型对比


下一篇:各种Android UI开源框架 开源库