本文介紹了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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
