关于layui iframe弹出层 父页面与子页面

1、layer弹框父页面调用子页面的方法

var minSpeak = layer.open({
	type: 2,
	min: function(){
		$('.layui-layer').css({
			'top': 'auto',
			'left': 'auto',
			'bottom': '27px',
			'right': '0'
		})
	},
	success: function(layero){
		layero.find('.layui-layer-close').remove();
		var myIframe = window[layero.find('iframe')[0]['name']];
		var fnc = myIframe.aaa(); //aaa()为子页面的方法
	 }
});

2、layui通过layero获取iframe的元素

$(layero).find('iframe').contents().find('#id');
 

$(layero).find('iframe').contents().find('#jqGridY');


获取window对象
$(layero).find('iframe')[0].contentWindow

3、获取iframe的dom元素及调用iframe页的js方法

1. 父页面点击第一个按钮触发，获取子页面中的body元素，调用子页面中定义的js方法

yes : function(index,layero){
	//获取iframe的body元素
	var body = layer.getChildFrame('body',index);
	//得到iframe页的窗口对象
	var iframeWin = window[layero.find('iframe')[0]['name']]; 
	//执行iframe页的showMsg方法
	iframeWin.showMsg("mercy");
					
	console.log(iframeWin);
	console.log("yes回调函数中："+body.html());
	console.log(layero,index);
}

2. 子页面定义的showMsg()方法：

<script type="text/javascript">
	function showMsg(msg){
		layer.msg(msg);
	}
</script>

4、layui 或者layer 父页面获取子页面数据 或者子页面获取父页面操作方法

// 父页面获取子页面的iframe
var frameId = $(layero).find("iframe").attr('id');
 
// 父页面获取子页面指定的id数据
var id = $(window.frames[frameId].document).find("#typecoupon").val();
 
 
// 子页面的数据赋值给父页面指定的id
$(window.parent.document).find("#eleName").val("eleVal");
 
// 子页面操作父页面按钮点击事件
$(window.parent.document).find("#toolbarBtns").children()[1].click();

5、layui父页面执行子页面方法

parent.window[layero.find('iframe')[0]['name']].子页面方法();
layero.find('iframe')[0].contentWindow.子页面方法();

6、layer父级怎么调用子级iframe中layui.use()里面的方法或者函数

如题，比如我现在父级给子级的表单赋值，要form.render()更新渲染，要怎么写？

layer.open({
  ....
   yes: function (index, layero) {
   	window[layero.find('iframe')[0]['name']].test();
           ...
   }
});
window[layero.find('iframe')[0]['name']].layui.form.render();

7、父页面如何调用子页面在layui.use中的方法

子页面定义的方法在JS的layui.use中

layui.use(['form'], function(){
    var $ = layui.$,
        form = layui.form;
    function sureChoose(){
        alert("你好！");
    }
）}

父页面中如何调用子页面的方法

 layer.open({
    type: 2 ,
    title: '新增部门',
    content: ContextPath+'/admin/dept/goAdd',
    area: ['450px', '450px'],
    btn: ['确定', '取消'],
    yes: function(index, layero){
     
    },
    success: function(layero, index){
        var iframe = window['layui-layer-iframe'+index];
        //调用子页面的全局函数
        //方法如何使用
        iframe.layer.sureChoose();
        iframe.sureChoose();
    }
});

8、如何从父页面给layer子页面中的JS变量赋值

【子页面】
var isNew = false;

【父页面layer】
var iframeWin = window[layero.find('iframe')[0]['name']];
console.log(iframeWin.isNew);
iframeWin.isNew = true;

9、layer子页面获取父页面的dom元素的方式

var print = $(layero).find("iframe")[0].contentWindow.document.getElementById("container");

yes: function(index,layero){
    //获取content页面里面元素的内容
     var print = $(layero).find("iframe")[0].contentWindow.document.getElementById("container");
     $(print).print({
        globalStyles : true,
        mediaPrint : true,
        stylesheet : null,
        noPrintSelector : ".no-print",
        iframe : true,
        append : null,
        prepend : null,
        manuallyCopyFormValues : true,
        deferred : $.Deferred()
    });
},

10、父、子页面之间页面元素的获取，方法的调用

在iframe页面上调取父级页面元素

1.在父页面上获取iframe页面元素(在父页面修改子页面div的背景色为红色)

<script type="text/javascript">
  window.onload = function(){ 
  var iframe = document.getElementById('iframeId').contentWindow; //iframeId 为子页面(iframe) id
  var div =iframe.document.getElementById('objId');   //子页面(iframeId )中指定元素的id
  div.style.backgroundColor = 'red';                 //修改子页面div背景色为红色
   }
</script>


2.在iframe页面上调取父级页面元素

<script type="text/javascript"> 
     window.onload = function(){
     var parentiframe = window.parent; //获取父级页面对象
     var div =parentiframe.document.getElementById('parDiv'); //获取父级页面中指定元素
     div.style.color = 'red';
   }
</script>

jq代码如下：

<script type="text/javascript"> 
 window.onload = function(){
 var div=$("#parDiv" , parent.document);
 $(div).css("color","red");
 }
</script>

11、jquery 父、子页面之间页面元素的获取，方法的调用

一、jquery 父、子页面之间页面元素的获取，方法的调用：

1. 父页面获取子页面元素：
    格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click(); 
    实例：$("#ifm").contents().find("#iBtnOk").click(); // ifm 为 <iframe> 标签 id; iBtnOk 为子页面按钮 id


2. 父页面调用子页面方法：
    格式：$("#iframe的ID")[0].contentWindow.iframe方法(); 
    实例：$("#ifm")[0].contentWindow().iClick(); // ifm 为 <iframe> 标签 id; iClick为子页面 js 方法


3. 子页面获取父页面元素：
    格式：$("#父页面元素id" , parent.document);
    实例：$("#pBtnOk" , parent.document).click(); // pBtnOk 为父页面标签 id

二、原生 js 父页面元素的获取，方法的调用：

1. 子页面调用父页面方法：
    格式：parent.父页面方法
    实例：parent.pClick(); // pClick 为父页面 js 方法


2. 子页面获取父页面元素：
    格式：window.parent.document.getElementById("父窗口元素ID");
    实例：window.parent.document.getElementById("pBtnOk");// pBtnOk为父页面标签 id