美文网首页
layer弹窗,父页面 子iframe 兄弟iframe之间传值

layer弹窗,父页面 子iframe 兄弟iframe之间传值

作者: shiva_s_guard | 来源:发表于2019-02-22 11:57 被阅读0次

    在这里记录下前端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 带参数的方式 传递到后台,然后再传递回来 或者 使用隐藏表单域进行解决。

    相关文章

      网友评论

          本文标题:layer弹窗,父页面 子iframe 兄弟iframe之间传值

          本文链接:https://www.haomeiwen.com/subject/yuwsyqtx.html