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. DS博客作业01-日期抽象数据类型的设计与实现

    1.思维导图和学习体会 1.1绪论知识思维导图 1.2学习体会 通过这几节课数据结构的新学习,让我感到了难度,很多概念性的东西,不是很好理解,老师在讲内容的时候,很容易跟不上节奏,我发现这门课的学习一 ...

  2. ryu 下发流表配置

    资料链接:http://ryu.readthedocs.io/en/latest/app/ofctl_rest.html 运行ryu进程: ryu-manager --ofp-tcp-listen-p ...

  3. windows挂载网络盘

    @echo offset filename=%DATE:~0,4%%DATE:~5,2%%DATE:~8,2%set filename="DataBak-%filename%"ne ...

  4. java----session

    什么是session? 在WEB开发中,服务器可以为每个用户浏览器创建一个会话对象(session对象),也就是说他是保存在服务端的.注意:一个浏览器独占一个session对象(默认情况下).因此,在 ...

  5. P5242 [USACO19FEB]Cow Dating

    题目链接 题意分析 首先我们可以得出计算公式 \[s_i=\prod_{k=1}^i(1-p_k)\] \[f_i=\sum_{k=1}^i\frac{p_k}{1-p_k}\] 那么 \[ans(i ...

  6. 2016级算法第六次上机-B.ModricWang's FFT : EASY VERSION

    1114 ModricWang's FFT EASY VERSION 思路 利用FFT做大整数乘法,实际上是把大整数变成多项式,然后做多项式乘法. 例如,对于\(1234\),改写成\(f(x)=1* ...

  7. 配置Nginx支持pathinfo模式

    Nginx服务器默认不支持pathinfo, 在需要pathinfo支持的程序中(如thinkphp),则无法支持”/index.php/Home/Index/index”这种网址.网上流传的解决办法 ...

  8. C#生成验证码类

    using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;us ...

  9. 1059 C语言竞赛 (20 分)

    #include <iostream> #include <iomanip> #include <cmath> using namespace std; <& ...

  10. [Alpha]Scrum Meeting#10

    github 本次会议项目由PM召开,时间为4月13日晚上10点30分 时长25分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写每日例会报告撰写并整理任务分配博客 撰写每日例会报告配合测试.验收 ...