西安seo建站,asp网站怎么做三语,wordpress商城开源,网站办公室文化建设layer弹层组件开发文档 - Layuihttps://www.layui.site/doc/modules/layer.html#layer.getChildFrame
需求及代码分析 如上图#xff0c;原来是点击一个按钮跳转到子页面#xff0c;现在想改为#xff1a;点击按钮#xff0c;在当前页打开。因为不想要重写子页面的样式及内…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 ?logIddata.logIdproblemDescproblemDesc; //传给子页面的参数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[typecheckbox]: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
