layer弹出子iframe层父子页面传值的实现方法
作者:MaramLee 发布时间:2024-04-19 09:56:10
标签:layer,iframe,父子,页面传值
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下:
父页面获取子页面元素
格式:
$("#iframeID").contents().find("#eleID")
示例代码:
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="father_dataChange" class="btn">父向子传值</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
$("#father_dataChange").click(function () {
$("#iframe_dataChange").contents().find("#son_dataChange").html("我是父页面传过来的值……")
})
</script>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="son_dataChange">我是子页面内容,点击“父向子传值”按钮我改变</div>
</body>
</html>
父页面调用子页面方法
格式:
$("#iframeID")[0].contentWindow.fun()
参数:fun()为子页面的函数
注意:$("#iframeID")[0]后面这个[0]必须要,亲测,删除就报错了,其原因是contentWindow是原生js的方法,所以用.eq(0)都不行。
示例代码:
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="father_fun" class="btn">父调子函数</span>
</div>
<iframe id="iframe_fun" src="son.html" frameborder="0"></iframe>
<script>
$("#father_fun").click(function () {
$("#iframe_fun")[0].contentWindow.son_fun()
})
</script>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="son_fun">我是子页面内容,点击“父调子函数”按钮我改变</div>
<script>
function son_fun() {
$("#son_fun").html("我变啦!啦啦啦……")
}
</script>
</body>
</html>
子页面获取父页面元素
格式:
$("#fatherID",window.parent.document)
参数:fun()为子页面的函数
示例代码:
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
</head>
<body>
<div id="father_dataChange">我是父页面内容,点击“子向父传值”按钮我改变</div>
<iframe src="son.html" frameborder="0"></iframe>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="son_dataChange" class="btn">子向父传值</span>
</div>
<script>
$("#son_dataChange").click(function () {
$("#father_dataChange",window.parent.document).html("变咯……");
});
</script>
</body>
</html>
子页面调用父页面方法
格式:
parent.ele
参数:fun()为子页面的函数
示例代码:
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
</head>
<body>
<iframe src="son.html" frameborder="0"></iframe>
<script>
var ml_var="我是父级定义的变量";
function ml() {
alert("我被调用了!")
}
</script>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="son_dataChange" class="btn">点我后记得看控制台哟</span>
</div>
<script>
$("#son_dataChange").click(function () {
console.log(parent.ml_var);
parent.ml();
});
</script>
</body>
</html>
layer弹出iframe层
layer弹出iframe层,其他都差不多,主要是如何找到iframe,先看下一般的layer调用iframe弹框代码:
layer.open({
type: 2,
title: '我是子iframe页面',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: './son.html' //iframe的url
});
于是我就想给这个iframe弹框设置一个id,
layer.open({
id:"son",
type: 2,
title: '我是子iframe页面',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: './son.html' //iframe的url
});
再通过这个id进行操作,操作方法和上面介绍的方法对应就可以,可是这种方法太繁琐,我又找了个更好的办法——利用layer的success回调函数:
layer.open({
type: 2,
title: '我是子iframe页面',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: './son.html', //iframe的url
success:function(dom){
let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();
$iframeDom.find("#test").html("我是从父级传来的值哟……")
}
});
示例代码:
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="layer.js"></script>
<style>
.btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;}
</style>
</head>
<body>
<div>
<span id="father_dataChange" class="btn">layer弹出iframe层</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
$("#father_dataChange").click(function () {
layer.open({
id:"son",
type: 2,
title: '我是子iframe页面',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: './son.html',
success:function(dom){
let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();
$iframeDom.find("#test").html("我是从父级传来的值哟……")
}
});
})
</script>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子级页面</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
来源:https://www.jianshu.com/p/8cb1ff6ea262
0
投稿
猜你喜欢
- udf_WeekDayName 代码如下:CREATE FUNCTION [dbo].[udf_WeekDayName] ( ) RETUR
- 什么是浮动?浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为
- 在采集网页信息的时候,经常需要伪造报头来实现采集脚本的有效执行下面,我们将使用urllib2的header部分伪造报头来实现采集信息方法1、
- 前言:在前面一些文章中,经常能看到介绍某某参数的作用,可能有些小伙伴仍搞不清楚 MySQL 参数是啥。本篇文章我们来聊聊 MySQL 参数,
- 本文实例讲述了Python模块的制作方法。分享给大家供大家参考,具体如下:1 目的利用setup.py将框架安装到python环境中,作为第
- 要查看当前是否已开启事件调度器 SHOW VARIABLES LIKE 'event_scheduler'; 开启事件查看器
- 显然,效果很实用。对于这个效果,我们并不解释如何去使用效果库,而是讲解如何创建类似的效果,并保持他的可用性,分离式(unobtrusive)
- 1、创建索引对于查询占主要的应用来说,索引显得尤为重要。很多时候性能问题很简单的就是因为我们忘了添加索引而造成的,或者说没有添加更为有效的索
- 1、吝啬你的代码,用最少的代码做最合适的事情; 比如你的代码中用到了很多document.getElementById(),你是否考虑写一个
- 需求:给定一个dataframe和一个list,list中存放的是dataframe中某一列的元素,删除dataframe中与list元素重
- 基础知识实际上,“运算符重载”只是意味着在类方法中拦截内置的操作……当类的实例出现在内置操作中,Python自动调用你的方法,并且你的方法的
- HTML被直接硬编码在 Python 代码之中。def current_datetime(request): now = dat
- UDP 套接字是可以使用 connect 系统调用连接到指定的地址的。从此以后,这个套接字只会接收来自这个地址的数据,而且可以使用 send
- 1、如果同时从同一个客户端插入很多行,使用含多个 VALUE的INSERT语句同时插入几行。这比使用单行INSERT语句快(在某些情况下快几
- 在平时的需求开发中涉及到将多列值合并为一列值的操作,通过查阅相关资料特此记录以下方法,方便日后学习复盘 import pandas
- 前言:文件处理是任何 Web 应用程序的重要组成部分。Python 有几个用于创建、读取、更新和删除文件的函数。1.文件处理在 Python
- 我们现在回到函数上。记得我们用 SUM 这个指令来算出所有的 Sales (营业额)吧!如果我们的需求变成是要算出每一间店 (store_n
- 1,%:表示任意0个或多个字符。可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示。 比如 SELECT * FR
- 前记在Python3.7后官方库出现了contextvars模块, 它的主要功能就是可以为多线程以及asyncio生态添加上下文功能,即使程
- 废话不多说,直接给大家上干货了,写的不好欢迎提出意见。具体代码如下所示:function hiddenPass(event){ var pa