父层

<div class="col-xs-4 text-left" style="padding-left: 50px;"><button type="button" class="btn btn-success" onclick="addCategory();">添加</button></div>

点击添加,按钮,执行添加方法

function addCategory() {
layer.open({
title:'<img src="{sh::RES}image/add.gif">&nbsp;添加分类',
type: ,
area: ['700px', '530px'],
fix: false, //不固定
maxmin: true,
content: '{sh::U("Mall/editcategory")}',
success:function(layero,index){
},
end:function(){
var handle_status = $("#handle_status").val();
if ( handle_status == '' ) {
layer.msg('添加成功!',{
icon: ,
time: //2秒关闭(如果不配置,默认是3秒)
},function(){
history.go();
});
} else if ( handle_status == '' ) {
layer.msg('添加失败!',{
icon: ,
time: //2秒关闭(如果不配置,默认是3秒)
},function(){
history.go();
});
}
}
});
}

这个方法,打开一个iframe页面,页面中可以执行一些操作,添加分类,执行完毕后调用一个end方法。这个方法,很有用!

不管执行结果如果,都会调用。

iframe可以传递参数到父页面。

end方法,根据传递的结果,执行一些后续操作。

iframe层

<div class="content">
<form action="" method="post" id="myform" enctype="multipart/form-data">
<div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">名称:</label>
</div>
<div class="right col-xs-8 text-left">
<input type="text" class="form-control" id="name" name="name" placeholder="">
</div>
</div> <div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">类别:</label>
</div>
<div class="right col-xs-8 text-left">
<input type="text" class="form-control" id="name" name="name" placeholder="">
</div>
</div> <div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">图标:</label>
</div>
<div class="right col-xs-8 text-left">
<input type="file" id="logo" name="logo">
</div>
</div> <div class="form-group row">
<div class="left col-xs-3 text-right">
<label for="">启用:</label>
</div>
<div class="right col-xs-8 text-left">
<input name="status" type="checkbox" checked="checked"> 启用
</div>
</div>
<div class="form-group text-center submit">
<button type="submit" class="btn btn-primary ">提交</button>
</div>
</form>
</div>

表单提交,提交到后台(表单提交,刷新iframe层页面)

<script type="text/javascript">
var index = parent.layer.getFrameIndex(window.name);
var success = '{sh:$success}';
if ( success == '' ) {
parent.$("#handle_status").val('');
parent.layer.close(index);
} else if( success == '' ) {
parent.$("#handle_status").val('');
parent.layer.close(index);
}
</script>

收到执行的结果,success,成功是1,失败是2。执行相应的操作。也就是,

传值+关闭iframe层。

父层有一个隐藏的元素,专门用来接收传值的

<input id="handle_status" value="" hidden="hidden">

流程很清晰。

layer很牛逼!

提交后,提示成功与失败,并且刷新页面。一气呵成。

layer iframe层的使用,传参的更多相关文章

  1. layer iframe层弹出图片

    这个js是在一个layer iframe弹出层中,点击按钮弹出图片

  2. iframe之间的postMessage传参

    1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...

  3. layer iframe层ajax回调弹出layer.msg()

    ajax success方法 success: function(data){ layer.msg("输入你需要的提示",{time:1000,end:function(){ // ...

  4. 关于url传参中文乱码问题

    之前都一直很不了解中文编码得问题,之前在做项目中没碰到那么头痛的问题.所以一直没有了解中文乱码的问题. 问题描述: 地址: http://localhost:8080/sun-government/c ...

  5. layer的iframe层的传参和回参

    从父窗口传参给iframe,参考://https://yq.aliyun.com/ziliao/133150 从iframe回参给父窗口,参考:https://www.cnblogs.com/jiqi ...

  6. MyBatis dao层 方法传参

    MyBatis dao层 方法传参有三种方法. 1. 以下标的方法获取参数. <update id="insertSuccessKilled">       INSER ...

  7. 使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法2

    <input type="button" onclick="edit(${it.id?c})" class="layui-btn layui-b ...

  8. h5嵌套iframe实时传参(适用vue)

    今天看到一个同事研究给iframe传参,由于好奇,我自己也写了个demo,说起来其实也挺简单的,但是在此之前没有用过,便想记录一下 其中主要用到的是postMessage 在页面中引入一个iframe ...

  9. 帆软用工具测试超链接打开弹窗(iframe嵌套),解决js传参带中文传递有乱码问题

    1.新建超链接 随意点击一个单元格右击,选择 超级链接 2.在弹出的窗口中选择JavaScript脚本 如图: 其中红框框出的是几个要点   ,左边的就不讲了,右上角的参数cc是设置了公式remote ...

随机推荐

  1. Maven实战——生命周期和插件

    Maven的构建过程包含:初始化.编译.測试.打包.集成測试.部署 Maven拥有三套相互独立的生命周期:clean(清理项目).default(构建项目).site(建立项目网站) 每一个生命周期包 ...

  2. Nginx优化—配置优化

    完整配置如下所示: user nginx; #运行的用户 pid /var/run/nginx.pid; worker_processes auto; #定义了nginx对外提供web服务时的word ...

  3. C#学习(三)

    通过类创建对象的过程称为类的实例化 匿名类型提供了一种方便的方法,可用来将一组只读属性封装到单个对象中,而无需首先显式定义一个类型. 要将匿名类型或包含匿名类型的集合作为参数传递给某一方法,可将参数作 ...

  4. Node.js脚本杀掉占用端口的进程

    express默认端口为3000,由于实际需要改为3392,修改监听3392之后,没有成功,发现该端口被系统正占用,为了避免每次都手工停掉该系统调用,释放端口,故写了如下脚本. var cmd=pro ...

  5. java反射机制(工厂模式)

    http://www.phpddt.com/dhtml/338.html java里面没有typeof,js有. 我终于实现了用反射机制编写的工厂模式.java反射在工厂模式可以体现. 包含产品接口类 ...

  6. Debugging Failed Because Integrated Windows Authentication Is Not Enabled

    To enable integrated Windows authentication Log onto the Web server using an administrator account. ...

  7. oracle登陆连接的问题

    一.登陆 1.使用客户端 直接在database中配置: IP:1521/orcl 其中IP为要连接的IP 其中1521为要连接的数据库的端口 其中orcl为要连接的数据库的实例名字 2.使用命令行 ...

  8. PHP Zip File

    安装 如需在服务器上运行 Zip File 函数,必须安装这些库: Guido Draheim 的 ZZIPlib 库: 下载 ZZIPlib 库 Zip PELC 扩展:下载 Zip PELC 扩展 ...

  9. QT5-控件-QFontComboBox-字体选择下拉列表,使用一个标签查看效果

    #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include <QFontComboBox> ...

  10. Win+PHP+IECapt完整实现网页批量截图并创建缩略图

    最近在开发一个本地互联网应用的项目,为了增加用户体验,需要在搜索结果左侧显示如图一所示的某个网站的缩略图效果,在网上不停地百度谷歌了一上午后,发现大多数实现少量截图还是可以的,如果大批量的截图总会在中 ...