layer作为优秀的jquery框架，可以用作弹出组件、日历、分页等，而且实现简单，只有几十k的大小。 
此处给出弹出窗口时子窗口与父窗口的传值。js和css这里不展示引入（以下给出目录结构的图片），仅仅给出我测试的代码： 
1 . index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" type="text/css" href="layer/skin/layer.css">

    <script type="text/javascript" src="layer/jquery-3.0.0.min.js"></script>

    <script type="text/javascript" src="layer/layer.js"></script>

</head>

<body>

    <p id="parentIframe">哈哈</p>

    <button id="ne1">查看变量</button>

    <button id="ne">打开iframe</button>

    <script type="text/javascript">

        var rel="原始变量";

        $(function(){

            $('#ne').on('click', function(){

                layer.open({

                    type: 2,

                    area: ['500px', '300px'],

                    maxmin: true,

                    content: 'f.html?id=1'

                });

            });

            $('#ne1').on('click', function(){

                alert(rel);

            });

        });

        function setRel(rel){

            this.rel=rel;

        }

        function getRel(){

            return rel;

        }

    </script>

</body>

</html>

f.html(子窗口)

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link rel="stylesheet" type="text/css" href="layer/skin/layer.css">

</head>

<body>

  <p><input id="name"><button id="new1">改变父类元素</button></p>

  <button id="new">关闭iframe</button>

  <script type="text/javascript" src="layer/jquery-3.0.0.min.js"></script>

  <script type="text/javascript" src="layer/layer.js"></script>

  <script>

    $(function(){

      var str=window.location.href;

      $("#name").val(str.split('?')[1]);

      $('#new').on('click', function(){

        var index = parent.layer.getFrameIndex(window.name);

        parent.setRel("子类传值");

        parent.layer.close(index);

      });

      $('#new1').on('click', function(){

        parent.$('#parentIframe').text($("#name").val());

      });

    });

  </script>

</body>

</html>
转载自：https://blog.csdn.net/nima1994/article/details/51933850

layer子窗口与父窗口传值的更多相关文章

  1. winform子窗口与父窗口的交互-使用委托与事件

    实现子窗口与父窗口的交互,通过父窗口调用并控制子窗口,子窗口也能控制父窗口,使用委托和事件的方法,可以实现. 1.父窗口调用子窗口,并通过子窗口控制父窗口 新建工程,创建两个窗体    显示子窗体的代 ...

  2. C#子窗口与父窗口交互（使用委托和事件）

    目标:在子窗口Form2上单击按钮时向Form1传递一组自定义参数,并显示在父窗口Form1上. 方法:有很多方法,这里只介绍委托和事件的实现方式. 思路:Form2中定义事件,Form1创建Form ...

  3. Qt学习3---子窗口与父窗口

    创建子窗口后,主窗口的头文件需要  #include "子窗口头文件" 子窗口和父窗口之间相互切换 子窗口没有办法处理父窗口,子窗口此时就需要一个信号: * 信号必须有signal ...

  4. React子组件与父组件传值

    一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...

  5. 子窗体与父窗体传值操作的js示例

    //返回值给父窗体 function returnParent(value) {//获取子窗体返回值    var parent = window.dialogArguments; //获取父页面   ...

  6. C#中两个Form窗口之间的传值（父->子）（子->父）

    //首先定义两个Form,一个为Form1,一个为Form2,其中Form1作为父窗口,Form2作为子窗口 //1.父窗口传值给子窗口 //Form1中代码: public Form1() { In ...

  7. C# WPF 通过委托实现多窗口间的传值

    在使用WPF开发的时候就不免会遇到需要两个窗口间进行传值操作,当然多窗口间传值的方法有很多种,本文介绍的是使用委托实现多窗口间的传值. 在上代码之前呢,先简单介绍一下什么是C#中的委托(如果只想了解如 ...

  8. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

  9. iframe里面的页面调用父窗口,左右窗口js函数的方法

      iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面 ...

随机推荐

  1. Vue的组件和路由

    组件 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能. 组件的 ...

  2. python--中的文件操作

    1.文件操作 把文件打开 open 打开 f = open ('文件路径',mode='模式',encoding='编码格式') #打开一个文件操作的时候取到的是一个句柄 读取的方法 . read() ...

  3. Tomcat绿色版启动"startup.bat"一闪问题的解决方法！

    进入DOS窗口,运行"startup.bat",会出现错误提示,我是win7 64位,提示“JRE_HOME”设置不正确.于是进入环境变量配置,设置“JRE_HOME”项,随后保存 ...

  4. bash脚本编程学习笔记（一）

    bash脚本语言,不同于C/C++是一种解释性语言.即在执行前不需要事先转变为可执行的二进制代码,而是每次执行时经解释器解释后执行.bash脚本语言是命令的堆砌,即按照实际需要,结合命令流程机制实现的 ...

  5. ava Maven项目之Nexus私服搭建和版本管理应用

    目录: Nexus介绍 环境.软件准备 Nexus服务搭建 Java Maven项目版本管理应用 FAQ 1.Nexus介绍 Nexus是一个强大的Maven仓库管理器,它极大地简化了自己内部仓库的维 ...

  6. Groovy学习记录-------Groovy安装/配置

    1.Groovy SDK下载 Groovy SDK官网下载地址: http://www.groovy-lang.org/download.html  每个版本有五个选项可供下载,依次为: binary ...

  7. JavaScript求数组Array的并集（javascript面试常见题目）

    var Utils = { joinArray:function(source,target){ for(var i = 0;i<source.length;i++){ var oa = sou ...

  8. [Objective-C语言教程]扩展（30）

    类扩展与类别有一些相似之处,但它只能添加到编译时具有源代码的类中(类与类扩展同时编译). 类扩展声明的方法是在原始类的实现块中实现的,因此不能在框架类上声明类扩展,例如Cocoa或Cocoa Touc ...

  9. multiprocess（上）

    仔细说来,multiprocess不是一个模块而是python中一个操作.管理进程的包. 之所以叫multi是取自multiple的多功能的意思,在这个包中几乎包含了和进程有关的所有子模块.由于提供的 ...

  10. 【笔记】AJAX基础

    [笔记]AJAX基础 Django AJAX  知识储备:JSON 什么是 JSON JSON 是轻量级的文本数据交换格式 JSON 独立于语言和平台.JSON 解析器和 JSON 库支持许多不同的编 ...