layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例


Posted in Javascript onSeptember 22, 2017

父层:

jsp中:

//页面上添加一个隐藏的输入框待用于被子层设置value,从而将子层的数据传递到此页面

<input type="hidden" id="getValue" name="getValue" value="" />

js代码:

//设置function,当执行时,弹出子窗口并传递当前窗口名称

//弹出子窗口(选择商家)
 function choseMerchant() {

  //获取当前窗口名称
  var parentName= window.name;

  /*(由于用的ssm框架)URL对应的是controller方法,并向其传递当前窗口名称,打开的窗口显示页面即    
  为经过controller方法后返回的页面*/
  var url = root + "/adPosition/choseMerchant?parentName="+ parentName;

  laySum = parent.layer.open({
   //设置打开的子窗口效果
   type : 2,
   title : "选择商家",
   shadeClose : true,
   shade : 0.5,
   shift : 0,
   area : [ '40%', '863px' ],
   content : url,
   success: function(layero, index){ 
   }
  });
 }

子层:

jsp中:

//页面添加的隐藏输入框,存储的值是经过controller方法后返回的父窗口名称,用于区分,将id设置为mainIframeName

<input type="hidden" id="mainIframeName" name="mainIframeName" value="${parentName}">

js代码:

//设置function,当执行时,传值并关闭当前窗口

function setvalue() {

  //得到“mainIframeName”输入框中存储的值
  var mainIframeName = $("#mainIframeName").val();

  //判断是否为空或者是未定义
  if (mainIframeName != "" && mainIframeName != "undefined") 
  {
  //此处的ifrc和winc的意义可自行查阅
  var ifrc = window.parent.frames[mainIframeName];
  var winc = ifrc.window || ifrc.contentWindow;
  try {
   //设置父窗口隐藏输入框的值为hello world
   winc.document.getElementById("getValue").value = "hello world!";
   } catch (ex) {
    winc.location.reload();
   }
  }
   //关闭当前窗口
   var index = parent.layer.getFrameIndex(window.name);
   parent.layer.close(index);
 }

总结:此方法用于子层直接给父层元素赋值,从而达到传值的效果,关键点在于需要将父层窗口名称传递到子层中。

以上就是小编为大家带来的layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例的全部内容了,希望大家喜欢哦~

如果大家想了解更多游戏活动与游戏攻略,请持续关注本站,本站小编将在第一时间为大家带来最好看、最好玩、最新鲜的游戏资讯。更多精彩内容,尽在3water游戏频道!

Javascript 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
在javascript中对于DOM的加强
Apr 11 Javascript
Javascript浅谈之this
Dec 17 Javascript
window.open 以post方式传递参数示例代码
Feb 27 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
js表单序列化判断空值的实例
Sep 22 #Javascript
VUE中的无限循环代码解析
Sep 22 #Javascript
详解vue中引入stylus及报错解决方法
Sep 22 #Javascript
EL表达式截取字符串的函数说明
Sep 22 #Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 #Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 #Javascript
ES6中新增的Object.assign()方法详解
Sep 22 #Javascript
You might like
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
2014/02/28 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Node.js查找当前目录下文件夹实例代码
2017/03/07 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python简单实现AES加密和解密
2019/03/28 Python
Python 切分数组实例解析
2019/11/07 Python
pytorch实现mnist数据集的图像可视化及保存
2020/01/14 Python
《满井游记》教学反思
2014/02/26 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
文案策划专业自荐信
2014/07/07 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书
浅谈MySQL函数
2021/10/05 MySQL