mirror of https://github.com/layui/layui
扩展： 在iframe页面关闭自身的方法
原写法：
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
扩展写法：
layer.close('#self'); //index为#self 表示关闭自身
layer.close('#self','hello'); //可以通过close第二个参数传递参数
概要：使用parent遍历算法确定执行 layer.open 的真正页面
测试页面：
layer.html 测试三
layer_dialog.html
pull/14/head
relucent
parent
3feccb7e44
commit
5ea3541c94
|
|
@ -24,9 +24,20 @@ var isLayui = window.layui && layui.define, $, win, ready = {
|
||||||
type: ['dialog', 'page', 'iframe', 'loading', 'tips']
|
type: ['dialog', 'page', 'iframe', 'loading', 'tips']
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//UUID
|
||||||
|
var uuid = function() {
|
||||||
|
var d = +(new Date());
|
||||||
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||||
|
var r = (d + Math.random() * 16) % 16 | 0;
|
||||||
|
d = Math.floor(d / 16);
|
||||||
|
return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
//默认内置方法。
|
//默认内置方法。
|
||||||
var layer = {
|
var layer = {
|
||||||
v: '3.0.1',
|
v: '3.0.1',
|
||||||
|
$uuid : uuid(),//页面标记
|
||||||
ie: function(){ //ie版本
|
ie: function(){ //ie版本
|
||||||
var agent = navigator.userAgent.toLowerCase();
|
var agent = navigator.userAgent.toLowerCase();
|
||||||
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
|
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
|
||||||
|
|
@ -593,6 +604,11 @@ Class.pt.callback = function(){
|
||||||
config.success(layero, that.index);
|
config.success(layero, that.index);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
config.type == 2 && layero.find('iframe').on('load', function(){
|
||||||
|
layero.find('iframe')[0].contentWindow.layer.$opener_uuid = layer.$uuid;
|
||||||
|
});
|
||||||
|
|
||||||
layer.ie == 6 && that.IE6(layero);
|
layer.ie == 6 && that.IE6(layero);
|
||||||
|
|
||||||
//按钮
|
//按钮
|
||||||
|
|
@ -861,10 +877,35 @@ layer.title = function(name, index){
|
||||||
};
|
};
|
||||||
|
|
||||||
//关闭layer总方法
|
//关闭layer总方法
|
||||||
layer.close = function(index,options){
|
layer.close = function(index,result){
|
||||||
|
|
||||||
|
if(index==='#self'){
|
||||||
|
//遍历parent确定执行layer.open的页面
|
||||||
|
var opener = (function(uuid){
|
||||||
|
var win = window, stack = [];
|
||||||
|
while (win != win.parent) {
|
||||||
|
stack.push(win = win.parent);
|
||||||
|
}
|
||||||
|
for (; stack.length;) {
|
||||||
|
win = stack.pop()
|
||||||
|
try {
|
||||||
|
var all = win.document.getElementsByTagName('*');//忽略掉没有权限的页面
|
||||||
|
if(win.layer && win.layer.$uuid === uuid){
|
||||||
|
return win;
|
||||||
|
}
|
||||||
|
} catch (ex) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return window;
|
||||||
|
})(layer.$opener_uuid);
|
||||||
|
|
||||||
|
var index = opener.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
|
||||||
|
opener.layer.close(index,result); //再执行关闭 , 传递结果参数
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
|
var layero = $('#'+ doms[0] + index), type = layero.attr('type'), closeAnim = 'layer-anim-close';
|
||||||
if(!layero[0]) return;
|
if(!layero[0]) return;
|
||||||
options = options || {};
|
|
||||||
var WRAP = 'layui-layer-wrap', remove = function(){
|
var WRAP = 'layui-layer-wrap', remove = function(){
|
||||||
if(type === ready.type[1] && layero.attr('conType') === 'object'){
|
if(type === ready.type[1] && layero.attr('conType') === 'object'){
|
||||||
layero.children(':not(.'+ doms[5] +')').remove();
|
layero.children(':not(.'+ doms[5] +')').remove();
|
||||||
|
|
@ -886,7 +927,7 @@ layer.close = function(index,options){
|
||||||
layero[0].innerHTML = '';
|
layero[0].innerHTML = '';
|
||||||
layero.remove();
|
layero.remove();
|
||||||
}
|
}
|
||||||
typeof ready.end[index] === 'function' && ready.end[index](options.result);
|
typeof ready.end[index] === 'function' && ready.end[index](result);
|
||||||
delete ready.end[index];
|
delete ready.end[index];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -39,16 +39,11 @@ layui.use('layer', function(){
|
||||||
}
|
}
|
||||||
,test3: function(){
|
,test3: function(){
|
||||||
layer.open({
|
layer.open({
|
||||||
type: 1
|
type: 2
|
||||||
,content: '2秒后关闭关闭弹窗，并调用end方法'
|
,content: 'layer_dlg.html'
|
||||||
,area: ['375px', '200px']
|
,area: ['375px', '200px']
|
||||||
,success: function(layero,index){
|
|
||||||
setTimeout(function(){
|
|
||||||
layer.close(index, {result:'hello layui'});
|
|
||||||
},2000);
|
|
||||||
}
|
|
||||||
,end: function(result){
|
,end: function(result){
|
||||||
layer.alert(result);
|
layer.alert('输入的文字为：' + result);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||||
|
<title>layer弹层</title>
|
||||||
|
<link rel="stylesheet" href="../src/css/layui.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form id="form" class="layui-form layui-form-pane" style="margin:10px 10px;>
|
||||||
|
<input id="id" name="id" type="hidden">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">输入文字</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" id="text" placeholder="请输入文字" autocomplete="off" class="layui-input" style="width:200px;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<button id="confirm" type="button" class="layui-btn">确定</button>
|
||||||
|
<button id="cancel" type="button" class="layui-btn layui-btn-primary">取消</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script src="../src/layui.js"></script>
|
||||||
|
<script>
|
||||||
|
layui.use('layer', function(){
|
||||||
|
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
|
||||||
|
$('#confirm').on('click', function(){
|
||||||
|
layer.close('#self',$('#text').val());
|
||||||
|
});
|
||||||
|
$('#cancel').on('click', function(){
|
||||||
|
layer.close('#self');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue