layer弹窗,父页面 子iframe 兄弟iframe之间传值,函数调用

在这里记录下前端layer弹窗 父,子,兄弟弹窗 之间参数传递以及函数调用


① 【父-->子】 【子-->父】

前言

//子弹窗给父页面元素赋值
parent.$("#parentInput").val("这是从弹窗传递过来的数据"); 

//子弹窗调用父页面方法
window.parent.childInvokerMethod(); 

//子弹窗获取父页面元素的值
window.parent.$("#shiva").val()

//弹框代码
var idx = layer.open({
    type: 2,
    title: '子页面',
    maxmin: true,
    area: ['800px', '500px'],
    content: './child1.html'
});

//父页面调用子弹窗的 js方法
var contentWindow = $("#layui-layer-iframe" + idx)[0].contentWindow;
contentWindow.yourMethod();

//父页面给子弹窗页面赋值
$("#layui-layer-iframe" + idx).contents().find("input").val("11111111");

① 【子-->兄弟】 【兄弟-->子】

A页面弹出B A 页面 弹出C
A页面弹出B ,再从B 页面弹出C B C平级 调用 parent.layer.open({});

//调用兄弟页面方法
 var contentWindow = window.parent.$("#layui-layer-iframe" + idx)[0].contentWindow;
 contentWindow.brotherInvokeMethod();

//给兄弟页面元素赋值
window.parent.$("#layui-layer-iframe" + idx).contents().find("input").val("11111111");

这里的 idx 可以通过url 带参数的方式 传递到后台,然后再传递回来 或者 使用隐藏表单域进行解决。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。