layer iframe层的使用，传参

父层

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

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

function addCategory() {layer.open({title:'<img src="{sh::RES}image/add.gif">&nbsp;添加分类',type:2,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 == '1') {layer.msg('添加成功！',{icon:1,time:2000 //2秒关闭（如果不配置，默认是3秒）
},function(){history.go(0);});}else if ( handle_status == '2') {layer.msg('添加失败！',{icon:2,time:2000 //2秒关闭（如果不配置，默认是3秒）
},function(){history.go(0);});}}});
}

这个方法，打开一个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 == '1') {parent.$("#handle_status").val('1');parent.layer.close(index);}else if( success == '2') {parent.$("#handle_status").val('2');parent.layer.close(index);}</script>

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

传值+关闭iframe层。

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

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

流程很清晰。

layer很牛逼！

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

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5135697.html，如需转载请自行联系原作者

layer iframe层的使用，传参相关推荐

关于url传参中文乱码问题
之前都一直很不了解中文编码得问题,之前在做项目中没碰到那么头痛的问题.所以一直没有了解中文乱码的问题. 问题描述: 地址: http://localhost:8080/sun-government/c ...
html跨域传值,iframe 跨域传参
iframe 跨域传参 2020-08-19 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了iframe 跨域传参,编程之家小编觉得挺不错的,现在分享给大家,也 ...
iframe传参问题
方法一:postmessage 传参数子向父页面传参 window.parent.postMessage({ // 参数是对象DOCK_ID: ship.userData.dockId, }, '* ...
母子页的iframe传参跳转，参数需要编码
背景: 我的项目是一个正常html嵌套了一个iframe, 项目需要传参后,改变iframe的src属性值,实现显示不同的页面说明: 再不传值的时候显示是这样的传值后显示所传值的页面例如页面值是 ...
iFrame嵌套传参
iFrame嵌套传参情况说明:两个Vue项目嵌套(vue父,Vue子) vue父 // vue父 <iframeref="iframeParms"width="1 ...
layer 弹出iframe层
layer 是一款使用非常方便且功能强健的 jQuery 弹出层插件,对各类浏览器中的兼容性也很好.使用它可以创建出交互体验更好的 Web 应用程序. layer 的维护人员是一群和小G年龄相仿,富有 ...
layer弹窗的iframe层怎么关闭。为什么设置的layer.iframeAuto(index)高度不能自适应
//在iframe页 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引.每个弹窗层都会分配一个索引.第一次点 ...
ajax redirectattributes 使用,Spring中RedirectAttributes对象重定向传参
Spring3中的FlashAttribute 为了防止用户刷新重复提交,save操作之后一般会redirect到另一个页面,同时带点操作成功的提示信息.因为是Redirect,Request里的 ...
pdf.js 请求传参关键词并高亮显示
pdf.js 请求传参关键词并高亮显示 1.去官网下载: http://mozilla.github.io/pdf.js/getting_started/#download 2.将下载的包copy到s ...

layer iframe层的使用，传参

layer iframe层的使用，传参相关推荐

最新文章

热门文章