layer弹出子iframe层父子页面传值的实现方法
网络 2018-12-17 3257
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下：
父页面获取子页面元素
格式：
1 | $("#iframeID").contents().find("#eleID") |
示例代码：
father.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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
1 2 3 4 5 6 7 8 9 10 11 | <!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> |
父页面调用子页面方法
格式：
1 | $("#iframeID")[0].contentWindow.fun() |
参数：fun()为子页面的函数
注意：$("#iframeID")[0]后面这个[0]必须要，亲测，删除就报错了，其原因是contentWindow是原生js的方法，所以用.eq(0)都不行。
示例代码：
father.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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> |
子页面获取父页面元素
格式：
1 | $("#fatherID",window.parent.document) |
参数：fun()为子页面的函数
示例代码：
father.html
1 2 3 4 5 6 7 8 9 10 11 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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弹框代码：
1 2 3 4 5 6 7 8 | layer.open({ type: 2, title: '我是子iframe页面', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: './son.html' //iframe的url }); |
于是我就想给这个iframe弹框设置一个id，
1 2 3 4 5 6 7 8 9 | layer.open({ id:"son", type: 2, title: '我是子iframe页面', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: './son.html' //iframe的url }); |
再通过这个id进行操作，操作方法和上面介绍的方法对应就可以，可是这种方法太繁琐，我又找了个更好的办法——利用layer的success回调函数：
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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
1 2 3 4 5 6 7 8 9 10 11 | <!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> |
