layer iframe层的使用,传参
父层
<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"> 添加分类',
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层的使用,传参的更多相关文章
- layer iframe层弹出图片
这个js是在一个layer iframe弹出层中,点击按钮弹出图片
- iframe之间的postMessage传参
1.传参 function IframeClose() { var obj = {method: "iframeClose"}; window.parent.postMessage ...
- layer iframe层ajax回调弹出layer.msg()
ajax success方法 success: function(data){ layer.msg("输入你需要的提示",{time:1000,end:function(){ // ...
- 关于url传参中文乱码问题
之前都一直很不了解中文编码得问题,之前在做项目中没碰到那么头痛的问题.所以一直没有了解中文乱码的问题. 问题描述: 地址: http://localhost:8080/sun-government/c ...
- layer的iframe层的传参和回参
从父窗口传参给iframe,参考://https://yq.aliyun.com/ziliao/133150 从iframe回参给父窗口,参考:https://www.cnblogs.com/jiqi ...
- MyBatis dao层 方法传参
MyBatis dao层 方法传参有三种方法. 1. 以下标的方法获取参数. <update id="insertSuccessKilled"> INSER ...
- 使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法2
<input type="button" onclick="edit(${it.id?c})" class="layui-btn layui-b ...
- h5嵌套iframe实时传参(适用vue)
今天看到一个同事研究给iframe传参,由于好奇,我自己也写了个demo,说起来其实也挺简单的,但是在此之前没有用过,便想记录一下 其中主要用到的是postMessage 在页面中引入一个iframe ...
- 帆软用工具测试超链接打开弹窗(iframe嵌套),解决js传参带中文传递有乱码问题
1.新建超链接 随意点击一个单元格右击,选择 超级链接 2.在弹出的窗口中选择JavaScript脚本 如图: 其中红框框出的是几个要点 ,左边的就不讲了,右上角的参数cc是设置了公式remote ...
随机推荐
- linux/hpux 添加用户
#添加用户组, 组名dev, 组id为1001groupadd -g 1001 dev #添加用户组dev,不指定组idgroupadd dev #添加用户user1, id为111, 属于dev组, ...
- Json对象直接存取数据库
需要jar包: json.jar jackson-core.jar jacson-mapper.jar 一.ArrayList转json和hashmap转json代码一样 /** * 把map转换成 ...
- Project Euler problem 61
题意很明了. 然后我大概的做法就是暴搜了 先把每个几边形数中四位数的处理出来. 然后我就DFS回溯着找就行了. 比较简单吧. #include <cstdio> #include < ...
- LeetCode Maximum Product Subarray 解题报告
LeetCode 新题又更新了.求:最大子数组乘积. https://oj.leetcode.com/problems/maximum-product-subarray/ 题目分析:求一个数组,连续子 ...
- COM编程入门第一部分——什么是COM,如何使用COM
本文的目的是为刚刚接触COM的程序员提供编程指南,并帮助他们理解COM的基本概念.内容包括COM规范简介,重要的COM术语以及如何重用现有的COM组件.本文不包括如何编写自己的COM对象和接口. CO ...
- JAVA - 回调机制
参考例子:android的Button OnClickListener接口.<第一行代码>中的回调例子 定义接口 public interface HttpCallbackListen ...
- 阿里云ECS安全改造:改用AWS EC2私钥方式登录
阿里云ECS有多烂,用过AWS的人都知道,ECS有什么问题呢,简单总结一下: 1)ubuntu居然root直接访问 2)端口全开 3)WEB控制台无法定义安全组及关闭端口 4)云盾黑洞 的确用起来很糟 ...
- 设计模式之—简单工厂模式<Simple Factory Pattern >
简单工厂模式结构图: 简单工厂模式以简单的加减乘除运算为例: 运算符类(Operation): namespace CalcTest.Simple_Factory_patterns { class O ...
- solr和mongodb比较
solr非常灵活,虽然mongodb添加索引查询速度比较快,但是solr查询比mongodb更加灵活,所以需要获取mongodb的oplog,实时将oplog中的数据推送到solr中 oplog A ...
- 关于VS2013连接远程数据库服务器的蛋疼问题
填写完用户名和密码后,点击数据库下拉菜单,接着就报错误