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存取照片的具体实现方法
Jun 30 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
JavaScript判断DIV内容是否为空的方法
Jan 29 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
vue.js实现请求数据的方法示例
Feb 07 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
需要发散思维学习PHP
2009/06/29 PHP
php后门URL的防范
2013/11/12 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
Javascript----文件操作
2007/01/18 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
2011/09/13 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
2014/11/20 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
js实现旋转的星空效果
2019/11/01 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python中Proxypool库的安装与配置
2018/10/19 Python
详解Python中的测试工具
2019/06/09 Python
没编程基础可以学python吗
2020/06/17 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
HTML5新特性之type=file文件上传功能
2018/02/02 HTML / CSS
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
巡警年度自我鉴定
2014/02/21 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
高级工程师英文求职信
2014/03/19 职场文书
学生个人自我鉴定
2014/03/26 职场文书
我爱我家教学反思
2014/05/01 职场文书
5s推行计划书
2014/05/06 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
花木兰观后感
2015/06/10 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技