layer彈層組件開發文檔 - Layuihttps://www.layui.site/doc/modules/layer.html#layer.getChildFrame

需求及代碼分析

?如上圖，原來是點擊一個按鈕跳轉到子頁面，現在想改為：點擊按鈕，在當前頁打開。因為不想要重寫子頁面的樣式及內容，所以就用到了 layui 的 iframe 層彈框，直接在當前頁引用子頁面：

/!*如果是iframe層*/ layer.open({type: 2, content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no'] });

按照原先的樣式結構及邏輯，“修改”按鈕是放在子頁面的，現在放到彈框里。這就導致原先在子頁面完成修改操作，現在要在父頁面的彈框點擊“修改”按鈕，獲取子頁面的內容，再進行提交。

layer.open({type: 2,content: 'test/iframe.html',success: function(layero, index){var body = layer.getChildFrame('body', index);var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();console.log(body.html()) //得到iframe頁的body內容body.find('input').val('Hi，我是從父頁來的')} });

通過官方文檔，可以了解到?：?

var body = layer.getChildFrame('body', index); var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe頁的窗口對象，執行iframe頁的方法：iframeWin.method();

iframeWin.子頁面方法，父頁面執行iframe頁的方法。

body.html，得到iframe頁的body內容。

body.find('input')，父頁面獲取子頁面DOM元素。

---

代碼：

// 監聽工具條（修改） table.on('tool(table)', function(obj){var data = obj.data;if(obj.event === 'search-tag') {console.log("查看大圖",data);} else if (obj.event === 'impower'){var problemDesc = data.problemDesc ? encodeURIComponent(data.problemDesc): "";var str = "?logId="+data.logId+"&problemDesc="+problemDesc; //傳給子頁面的參數layer.open({type: 2, content: '子頁面相對地址'+str //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no'],area: ['1000px', '620px'],btn: ['修改', '取消'],yes: function(index, layero){//獲得彈出層iframevar body = layer.getChildFrame('body', index);// console.log(body.html()) //得到iframe頁的body內容var problemDesc = []; //選中的復選框body.find(".cycleBox input[type='checkbox']:checked").each(function(){problemDesc.push(Number($(this).val()));});var whereData = {logId: data.logId,problemDesc: problemDesc,qr: body.find(".cycleBox .qr").val(),cannedDate: body.find(".cycleBox .cannedDate").val(),lotId: body.find(".cycleBox .lotId").val()}upDateProblem(whereData, index); //調用修改接口}});} });

---

參考：

https://www.jb51.net/article/145817.htmhttps://www.jb51.net/article/145817.htm

總結

以上是生活随笔為你收集整理的layui 父页面弹框中获取子页面的内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。