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 相关文章推荐
关于 byval 与 byref 的区别分析总结
Oct 08 Javascript
Js动态创建div
Sep 25 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
JS产生随机数的用法小结
Dec 10 Javascript
原生js轮播特效
May 18 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 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
Oracle 常见问题解答
2006/10/09 PHP
php中JSON的使用方法
2015/04/30 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
简单实现php上传文件功能
2017/09/21 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
JS实现浏览器状态栏显示时间的方法
2015/10/27 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
与UNIX有关的几个名词
2015/09/17 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
活动总结报告怎么写
2014/07/03 职场文书
员工团队活动方案
2014/08/28 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
nginx常用配置conf的示例代码详解
2022/03/21 Servers
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS