layer弹出子iframe层父子页面传值的实现方法


Posted in Javascript onNovember 22, 2018

本文介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
javascript实现获取字符串hash值
May 10 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
微信小程序倒计时功能实现代码
Nov 09 Javascript
11行JS代码制作二维码生成功能
Mar 09 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
详解JS WebSocket断开原因和心跳机制
May 07 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 #Javascript
从源码里了解vue中的nextTick的使用
Nov 22 #Javascript
Vue动态加载异步组件的方法
Nov 21 #Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 #Javascript
跨域解决之JSONP和CORS的详细介绍
Nov 21 #Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
Nov 21 #Javascript
JSON生成Form表单的方法示例
Nov 21 #Javascript
You might like
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Python translator使用实例
2008/09/06 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
详解Python装饰器由浅入深
2016/12/09 Python
python实现简易云音乐播放器
2018/01/04 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
pycharm配置git(图文教程)
2019/08/16 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
详解vscode实现远程linux服务器上Python开发
2020/11/10 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
中职生自荐信
2013/10/13 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL