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

更新时间：2018年11月22日 10:05:39 作者：MaramLee

这篇文章主要介绍了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

原生js实现打字动画游戏
本文主要分享了原生js实现打字动画游戏的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
用js+iframe形成页面的一种遮罩效果的具体实现
用js形成页面的一种遮罩效果，选择想要进行遮罩的窗口，在这里想要遮罩的是一个iframe窗口，具体的实现如下，感兴趣的朋友可以参参考下
2013-12-12
JavaScript学习笔记之DOM基础操作实例小结
这篇文章主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
2019-01-01
JS图片懒加载的优点及实现原理
这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
JS遍历页面所有对象属性及实现方法
下面小编就为大家带来一篇JS遍历页面所有对象属性及实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
Bootstrap源码解读模态弹出框（11）
这篇文章主要源码解读了Bootstrap模态弹出框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Bootstrap Table使用心得总结
这篇文章主要为大家总结了Bootstrap Table使用心得,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
JS实现IE状态栏文字缩放效果代码
这篇文章主要介绍了JS实现IE状态栏文字缩放效果代码,涉及JavaScript针对浏览器的相关调用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-10-10
Javascript URI 解析介绍
这篇文章主要介绍了Javascript URI 解析介绍,本文直接给出代码示例,需要的朋友可以参考下
2015-03-03
JavaScript 保护变量不被随意修改的实现代码
本文通过实例代码给大家分享JavaScript 保护变量不被随意修改的实现方法，需要的朋友参考下吧
2017-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具