layui中從子窗口傳遞數據到父窗口,第三個子彈層的值傳給第二個彈層
阿新 • • 發佈：2018-07-03
9.png set 定義 local 個人 還需要 參考 cal 應該
最近做一個項目的需要多個彈層,每個彈層中還需要數據傳遞,
大概如圖,看圖自己應該明白
如何在在b頁面選擇好的值傳給a頁面的問題,這個問題我百度了好久都沒有解決
後來參考了文檔
http://fuxiao.io/practice/docs/#/layui/layer/iframes
加上自己理會,終於解決問題了,這個文檔看了好幾次還是不太明白(個人理解能力差),後來加班自己邊動手邊理解,解決問題了
上代碼
主頁面(top.html)的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="author" content=""> <title>top</title> <style> .top{ margin-left: 100px; margin-top: 100px; } </style> </head> <body> <div class="top"> <h1>我是top頁面</h1> <button class="new-add">點我彈出a頁面</button> </div> <script src="../assets/scripts/jquery.min.js"></script> <script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script> <script> </script> <script type="text/javascript"> var layerFrameConfig = {};// 在主頁面上定義變量,保存每個彈層的layero,和index $(‘.new-add‘).on(‘click‘,function () { var url = ‘http://localhost:63342/test-webapp/test2/a.html?_ijt=788n4ijd8brnpou9iu6s365hom‘ parent.layer.open({ type: 2, title: ‘我是a頁面‘, isOutAnim:false, area: [‘660px‘,‘480px‘], content: [url], success: function(layero, index){ // 把a頁面的layero和index保存到top頁面中的layerFrameConfig變量中 // 在b頁面就可以通過 top.layerFrameConfig 等獲取a頁面的windown對象 top.layerFrameConfig.iframeA = { layer_index: index, layer_layero: layero } } }) }) </script> </body> </html>
a 頁面的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="author" content=""> <title>a</title> <style> .a{ padding: 20px; } </style> </head> <body> <div class="a"> <button class="new-add">我是a頁面</button> <h1>我是通過top頁面打開的彈層a子頁面</h1> <input id="inputa" type="text" value="a"> </div> <script src="../assets/scripts/jquery.min.js"></script> <script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script> <!-- 對應JS --> <script> </script> <script type="text/javascript"> $(‘.new-add‘).on(‘click‘,function () { var url = ‘http://localhost:63342/test-webapp/test2/b.html?_ijt=788n4ijd8brnpou9iu6s365hom‘ parent.layer.open({ type: 2, isOutAnim:false, title: ‘我是b頁面‘, area: [‘660px‘,‘480px‘], content: [url], success: function(layero, index){ // 把b頁面的layero和index保存到top頁面中的layerFrameConfig變量中 // top.layerFrameConfig.iframeB = { // layer_index: index, // layer_layero: layero // } } }) }) </script> </body> </html>
b頁面的代碼
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="author" content=""> <title>b</title> <style> .b{ padding: 20px; } </style> </head> <body> <div class="b"> <h2>把值傳給第a頁面的input,也就是相對於來說b的父頁面</h2> <button class="save">點我傳值給父頁面(a頁面)的input框</button> <h4>我是通過彈層a子頁面點擊彈出來的頁面</h4> </div> <script src="../assets/scripts/jquery.min.js"></script> <script src="../js/plugins/layui/layui.all.js" type="text/javascript" charset="utf-8"></script> <!-- 對應JS --> <script> </script> <script type="text/javascript"> // 此段代碼處於 iframeB 頁面中 var lfc = top.layerFrameConfig; var iframeAIndex = lfc.iframeA.layer_index; var iframeALayero = lfc.iframeA.layer_layero; // console.log(iframeAIndex) // console.log(iframeALayero) var iframeAWin = top[iframeALayero.find(‘iframe‘)[0][‘name‘]]; var index = parent.layer.getFrameIndex(window.name); // 獲取當前的index $(‘.save‘).click(function () { iframeAWin.$(‘#inputa‘).val(‘我是B(子)頁面傳來的值‘); parent.layer.close(index); }); </script> </body> </html>
layui中從子窗口傳遞數據到父窗口,第三個子彈層的值傳給第二個彈層