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

原创 2016年12月09日 17:12:48

问题背景:

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

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

代码如下:

$('#sayHello').click(function () {
        top.layer.open({
            id: "layer_say_hello",
            type: 2,
            title: '打招呼',
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '400px'],
            content: '/Findfriend/Part_SayHello', //iframe的url
            success: function (layero, index) {
                //传入参数,并赋值给iframe的元素
            }
        });
    })

问题描述:

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

问题分析:

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

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


正确代码如下:

$('#sayHello').click(function () {
        top.layer.open({
            id: "layer_say_hello",
            type: 2,
            title: '打招呼',
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '400px'],
            content: '/Findfriend/Part_SayHello', //iframe的url
            success: function (layero, index) {
                var her_uli_id = $("#headico").attr("data-uli-id"); //headico 是 HomeFrame的元素
                var her_nickname = $("#nickname").text();   //nickname 是 HomeFrame的元素
                // layero.find("iframe")        找到iframe的jquery对象
                // layero.find("iframe")[0]     将jqeruy对象转化为Dom对象
                // contentWindow                获取当前 iframe 的 内容 window对象(Dom对象)
                //.send-hello 是 LayerFrame 的元素
                var jquerySendHelloButton = $(".send-hello", layero.find("iframe")[0].contentWindow.document);
                jquerySendHelloButton.attr("data-her-uli-id", her_uli_id);
                jquerySendHelloButton.attr("data-her-nick-name", her_nickname);
            }
        });
    })
版权声明:本文为博主原创文章,未经博主允许不得转载。

使用layer 弹出层, 控制子父页面参数

1,原料  script type="text/javascript" src="${ctx}/jslib/jquery-1.8.3.js">script> script type="te...

layer.open组件获取弹出层页面变量、函数

最近做项目遇到个问题 使用layer.open组件弹出层,需要将该弹出层抽取城单独的公共页面,因此需要在主页面获取弹出层页面的相关变量或者函数值。记录下解决办法。先来看layer.open函数再...

layer弹窗自定义及向父页动态传参

layer弹窗自定义及父页动态传参            做项目中需要用到弹出框在父页面内弹出对话框供用户选择信息,然后将用户选择传回父页面的需求。查找网上资料,发现layer弹窗插件是个好东西,能完...

layui弹窗父子窗口之间传参数的方法

1、父页面打开子页面并向子页面传参数  function setChooseValues(ret){ var oView = document.getElementById(...
  • babyxue
  • babyxue
  • 2017年08月07日 17:32
  • 2363

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

弹出层插件的编写-layer(跨iframe传值回调)

弹出层(layer)在往上有非常多,这里为什么我要把它的实现提出来,原因有以下2点: 1、写这篇文章也算是我博客的一个开端,他们都说:“不写博客成不了大神” - - 2、我见过的弹出层中都基本没有处...

第一次遇到layer弹出层传参

做项目下载了一个后台模板,在修改的过程中遇到了{foreach $info as $k=>$v} ...

layui前台框架的基本弹出层的使用

首先明确的是在content里面可以添加可以传入普通的html内容,也可以添加dom元素。当你在往content里面添加一个dom元素的时候,有可能碰到弹出框的按钮关闭不了,这时候你金额已根据btn数...
  • rt2016
  • rt2016
  • 2017年03月09日 10:50
  • 1604

layer:子父之间的数据传递

layer中有这样的情况,父页面与弹窗(子页面)之间的数据通信。*表单中的表单元素必须有name属性。这边我讲一下两种情况(都是以表单为例子):1、父页面的数据在弹窗(子页面)中显示。 2、子页面(...
  • DOCALLEN
  • DOCALLEN
  • 2017年03月14日 19:34
  • 11005

layer使用post发送请求加载数据

使用layer.open 打开一个弹出框后,(通过属性 content 加载弹出框中的内容,因为我 需要在加载弹出框后,发送一个url请求动态加载数据,所以type设置为2,那么问题来了,当url的参...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:layer.js使用心得-向弹出框传值问题
举报原因:
原因补充:

(最多只允许输入30个字)