1.使用layui 弹出框方法调用子级页面中的函数 (只显示主要代码) index_s.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./v2.4.5/layui.all.js"></script> <script> var url = "index.html"; var _index=layui.layer.open({ type: 2, title:"调用子级方法", area: ['70%', '90%'], content: url, success:function (layero, index) { }, shadeClose: true, //开启遮罩关闭 btn: ["确认","取消"], btnAlign: 'c', yes: function(index, layero){ //index 对应的是 yes 方法里的其中一个参数 index 这样就可以找到自己的 index.html 页面调取方法了 //window.fn_click_get_input_value 就是 index.html 页面里面的方法 window["layui-layer-iframe"+index].window.fn_click_get_input_value(function (value) { //代码 按自己的需求写...... alert(value); }); }, cancel:function (index, layero) { //点击关闭 调取子级方法的用法 yes 里面那个方法是无效的 var _win=$(layero).find("#layui-layer-iframe"+index][0].contentWindow.window; if(_win.fn_click_get_input_value){ _win.fn_click_get_input_value(); } } }); </script> </body> </html>
2. index.html 子级页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> </style> </head> <body> <div class=""> <span>子级:</span> <input type="text" name="childValue" id="childValue"> </div> <script src="./jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ //弹出框点击确定 要调用的方法 window.fn_click_get_input_value=function(fun){ var childValue=$("#childValue").val(); fun(childValue);//回调函数 } }) </script> </body> </html>
3.效果图: