关于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方法
- 父页面点击第一个按钮触发，获取子页面中的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);
}
- 子页面定义的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 为