layui弹出层之layer.open弹出iframe窗口·
layui弹出层之layer.open弹出iframe窗口·
layer.open弹出iframe窗口
【1】该功能为案例，弹出iframe窗口显示上传数据
由于layui的弹出层每次执行layer.open({})都会弹出新的iframe窗口，它不会帮你判断是否弹出相同的iframe窗口，使用只能自己手动判断，禁止在已有iframe窗口下，再次使用layer.open({})创建新的iframe窗口
1）解决重复弹出iframe相同窗口方法
因为layer.open({})再创建iframe窗口时，会返回一个标识--参数index为层的索引(每一种弹层调用方式，都会返回一个index)
使用全局变量index区分弹出iframe窗口在需要上传时，判断if(index!="")
2）解决父子页面数据交互问题
只要能获取iframe窗口的id，通过其他函数进行数据交互
如，contentWindow方法
//得到iframe页的窗口对象，执行iframe页的方法：
var iframeWin = window[layero.find('iframe')[0]['name']];
//获取iframe窗口的id
var iframeID=iframeWin.frameElement.id;
3）解决窗体自动从最小化--》还原
layui通过layer.full()、layer.min()、layer.restore()手工执行最大小化
只要知道iframe窗口参数index的标识索引就能控制iframe窗口最大、最小、还原化和关闭
layer.restore(index);
注意，我在执行该方法时，代码出现些bug，该方法好像会干扰
对iframe窗口的操作和其他代码执行，所以放到位置要放好点
我用全局变量var indexmin=false;
当iframe窗口缩小时，触发min事件就改为true，
min:function(){
indexmin=true;
},
目的是iframe窗口缩小化时，正好又执行上传，我需要iframe窗口还原显示上传数据
if(indexmin==true){
layer.restore(index);
indexmin=false;
}
//layer.open的全局变量--iframe的标志
var index;
var iframeid="";
var indexmin=false;
function upinput(num){
//判断还原iframe的窗口
if(indexmin==true){
layer.restore(index);
indexmin=false;
}
//获取用户存储空间ID
var userSpaceID=$("#sessionUserSpaceID").val();
//如果iframeid不为空，声明已有iframe上传窗口，不再创建
if(iframeid!=""){
if(num==1){
var file=document.getElementById("files1");
}else if(num==2){
var file=document.getElementById("files2");
}else if(num==3){
var file=document.getElementById("folder");
}
//父页面通过iframeid调用子页面函数传递数据
document.getElementById(""+iframeid).contentWindow.acceptUpload(file.files,userSpaceID);
//清除input[type=file]的所有文件记录
file.outerHTML=file.outerHTML;
}else{
//新建iframe上传窗口
newUpiframe(num,userSpaceID);
}
}
//新建iframe上传窗口
function newUpiframe(num,userSpaceID){
if(num==1){
var file=document.getElementById("files1");
}else if(num==2){
var file=document.getElementById("files2");
}else if(num==3){
var file=document.getElementById("folder");
}
index = layer.open({
//页面层默认选择2，content指向父层某个div时type设置为1
Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
type:2,
//头部标题
title:'上传',
//子层容器宽度和高度
area:['800px','800px'],
//右下角弹出
offset: 'rb',
//子层页面资源
//这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['xxx', 'no']
content:"${ctx}/jsp/upload.jsp",
fix: true, //不固定
maxmin: true,
shadeClose: false,//点击遮罩区域是否关闭页面
scrollbar: false,//滚动条
shade:0,
success: function(layero, index){
console.log(layero);
//var body = layer.getChildFrame('body',index);//建立父子联系
//得到iframe的窗口对象，执行iframe页的方法：
var iframeWin = window[layero.find('iframe')[0]['name']];
var iframeID=iframeWin.frameElement.id;
iframeid=iframeID;
//父页面调用子页面的方法
document.getElementById(""+iframeID).contentWindow.acceptUpload(file.files,userSpaceID);
//清除input[type=file]的所有文件记录
file.outerHTML=file.outerHTML;
},
//当点击iframe的窗口的关闭按钮触发事件
cancel: function(index, layero){
//父页面调用子页面的方法
var en=document.getElementById(""+iframeid).contentWindow
.upFinishIsNO();
if(en==true){
document.getElementById(""+iframeid).contentWindow.cleanUpInfor();
iframeid="";
layer.close(index);
}else if(en==false){
//只有当点击confirm框的确定时，该层才会关闭
if(confirm("未上传完成，是否关闭上传吗？")){
document.getElementById(""+iframeid).contentWindow.cleanUpInfor();
iframeid="";
layer.close(index);
}
return false;
}
},
//当点击iframe的窗口的最小化按钮触发事件
min:function(){
indexmin=true;
},
});
}
其他Layui的弹出层
需要引用 <script src="~/Content/layui/layui.all.js">script>
【1】提示框：
layer.msg('弱弱的提示一下', { icon: 5 ,time:3*1000, anim: 6 });
【2】信息框
layer.alert('弱弱的提示一下', { icon: 5 ,time:3*1000, anim: 6 });
【1】time - 自动关闭所需毫秒
类型：Number，默认：0
默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
【2】anim - 弹出动画
类型：Number，默认：0
我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数
| 值 |
备注 |
| anim: 0 |
平滑放大。默认 |
| anim: 1 |
从上掉落 |
| anim: 2 |
从最底部往上滑入 |
| anim: 3 |
从左滑入 |
| anim: 4 |
从左翻滚 |
| anim: 5 |
渐显 |
| anim: 6 |
抖动 |