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']
|
||||
};
|
||||
|
||||
//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 = {
|
||||
v: '3.0.1',
|
||||
$uuid : uuid(),//页面标记
|
||||
ie: function(){ //ie版本
|
||||
var agent = navigator.userAgent.toLowerCase();
|
||||
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
|
||||
|
|
@ -593,6 +604,11 @@ Class.pt.callback = function(){
|
|||
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);
|
||||
|
||||
//按钮
|
||||
|
|
@ -861,10 +877,35 @@ layer.title = function(name, index){
|
|||
};
|
||||
|
||||
//关闭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';
|
||||
if(!layero[0]) return;
|
||||
options = options || {};
|
||||
var WRAP = 'layui-layer-wrap', remove = function(){
|
||||
if(type === ready.type[1] && layero.attr('conType') === 'object'){
|
||||
layero.children(':not(.'+ doms[5] +')').remove();
|
||||
|
|
@ -886,7 +927,7 @@ layer.close = function(index,options){
|
|||
layero[0].innerHTML = '';
|
||||
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];
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -39,16 +39,11 @@ layui.use('layer', function(){
|
|||
}
|
||||
,test3: function(){
|
||||
layer.open({
|
||||
type: 1
|
||||
,content: '2秒后关闭关闭弹窗，并调用end方法'
|
||||
type: 2
|
||||
,content: 'layer_dlg.html'
|
||||
,area: ['375px', '200px']
|
||||
,success: function(layero,index){
|
||||
setTimeout(function(){
|
||||
layer.close(index, {result:'hello layui'});
|
||||
},2000);
|
||||
}
|
||||
,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