网络编程
位置:首页>> 网络编程>> JavaScript>> layer弹出子iframe层父子页面传值的实现方法

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
手机版 网络编程 asp之家 www.aspxhome.com