layer.js使用心得-向弹出框传值问题

问题背景:

实现弹出对话框加载页面,所以我选择了独立组件layer.js。基于layer.js组件弹出了一个新的iframe的窗口(假设name为LayerFrame,方便后面称呼),但需要从之前的页面传入参数

注:'#sayHello'元素是在主窗口下的 HomeFram(HomeFrame是主窗口下的子 iframe) 里

代码如下:

[javascript]  view plain  copy
  1. $('#sayHello').click(function () {  
  2.         top.layer.open({  
  3.             id: "layer_say_hello",  
  4.             type: 2,  
  5.             title: '打招呼',  
  6.             shadeClose: true,  
  7.             shade: 0.8,  
  8.             area: ['500px''400px'],  
  9.             content: '/Findfriend/Part_SayHello'//iframe的url  
  10.             success: function (layero, index) {  
  11.                 //传入参数,并赋值给iframe的元素  
  12.             }  
  13.         });  
  14.     })  

问题描述:

在success回调函数中使用jquery选取不到弹出的 ifram 的元素

问题分析:

经过下午的头破血流生气,终于被我给分析出来了,功夫不负有心人啊。废话少说,重点来了。

原因是:success回调函数的上下文并不是 主窗口的上下文, 而是 HomeFrame 的上下文。所以在success回调函数中是可以直接找到 HomeFrame 中的元素。如果要找到 LayerFrame 的元素,就必须先找到 LayerFrame 的Dom对象,然后方可找到 LayerFrame 的 document ,最后再去找 LayerFrame 的元素


正确代码如下:

[javascript]  view plain  copy
  1. $('#sayHello').click(function () {  
  2.         top.layer.open({  
  3.             id: "layer_say_hello",  
  4.             type: 2,  
  5.             title: '打招呼',  
  6.             shadeClose: true,  
  7.             shade: 0.8,  
  8.             area: ['500px''400px'],  
  9.             content: '/Findfriend/Part_SayHello'//iframe的url  
  10.             success: function (layero, index) {  
  11.                 var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素  
  12.                 var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素  
  13.                 // layero.find("iframe")        找到iframe的jquery对象  
  14.                 // layero.find("iframe")[0]     将jqeruy对象转化为Dom对象  
  15.                 // contentWindow                获取当前 iframe 的 内容 window对象(Dom对象)  
  16.                 //.send-hello 是 LayerFrame 的元素  
  17.                 var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);  
  18.                 jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);  
  19.                 jquerySendHelloButton.attr("data-her-nick-name", her_nickname);  
  20.             }  
  21.         });  
  22.     })  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值