首页 > 编程 > JavaScript > 正文

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

2019-11-19 12:29:24
字体:
来源:转载
供稿:网友

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表