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 相关文章推荐
javascript dom 基本操作小结
Apr 11 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
JavaScript进制转换实现方法解析
Jan 18 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
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
利用Vue实现移动端图片轮播组件的方法实例
2017/08/23 Javascript
AngularJS 教程及实例代码
2017/10/23 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
python多线程调用exit无法退出的解决方法
2019/02/18 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python numpy库np.percentile用法说明
2020/06/08 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
39美元购买一副眼镜或太阳镜:39DollarGlasses.com
2018/06/17 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
华为python面试题
2016/05/03 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
毕业寄语大全
2014/04/09 职场文书
珍爱生命演讲稿
2014/05/10 职场文书
公司担保书格式范文
2014/05/12 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书