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 相关文章推荐
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
Nov 17 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
Oct 31 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
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
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
AngularJS学习第二篇 AngularJS依赖注入
2017/02/13 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[10:39]DOTA2上海特级锦标赛音乐会纪录片
2016/03/21 DOTA
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
python实现二分查找算法
2020/09/18 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
Nike香港官网:Nike HK
2019/03/23 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
师范应届生教师求职信
2013/11/05 职场文书
户外活动总结范文
2014/04/30 职场文书
活动总结报告范文
2014/05/04 职场文书
产品生产计划书
2014/05/07 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
街道务虚会发言材料
2014/10/20 职场文书
工程服务质量承诺书
2015/04/29 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL