子页面如何传值到父页面?

提问 已结
16 8706
前端
前端 2015-11-30
悬赏:5飞吻
这是父页面的代码
<body>
<button id="parentIframe">小小提示层</button>
<input id="shuzhi" />


</body>
<script src="layer/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script>


//弹出一个iframe层
var index = $('#parentIframe').on('click', function(){
layer.open({
type: 2,
area: ['300px', '230px'],
fix: false, //不固定
maxmin: true,
content: 'test.html'
});
});
</script>



这是子页面的代码
<body >
<input id="name" />
<button id="transmit">给父页面传值</button>
<button id="closeIframe">关闭iframe</button>

</body>
<script src="layer/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript" language="javascript">

var index = layer.getFrameIndex(window.name); //获取窗口索引


//给父页面传值
$('#transmit').on('click', function(){
$('#parentIframe').text('我被改变了');
layer.tips('Look here', '#parentIframe', {time: 5000});
layer.close(index);
});
//关闭iframe
$('#closeIframe').click(function(){
var val = $('#name').val();
if(val === ''){
layer.msg('请填写标记');
return;
}
layer.msg('您将标记 [ ' +val + ' ] 成功传送给了父窗口');
layer.close(index);
});

</script>

都能执行,但是关闭不了子页面,layer.close(index);不执行
回帖
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-11-30
    //给父页面传值
    $('#transmit').on('click', function(){
    parent.$('#parentIframe').text('我被改变了');
    parent.layer.tips('Look here', '#parentIframe', {time: 5000});
    parent.layer.close(parent.layer.getFrameIndex(window.name));
    });
    //关闭iframe
    $('#closeIframe').click(function(){
    var val = $('#name').val();
    if(val === ''){
    parent.layer.msg('请填写标记');
    return;
    }
    parent.layer.msg('您将标记 [ ' +val + ' ] 成功传送给了父窗口');
    parent.layer.close(parent.layer.getFrameIndex(window.name));
    });
    2 回复
  • 前端
    2015-11-30
    @小付(活雷锋)
    谢谢拉~
    再请问下layer.open出一个弹出层,如何将值传回页面?
    <body>
    <button id="parentIframe">小小提示层</button>
    <input id="shuzhi" />

    <!-- 弹窗 -->
    <div id="classDialog" style="display:none;">
    <div style="text-align: center;">
    <p style="color: #fff;font-size: 20px;font-weight: bold;">选择分类</p>

    <input id="name" value="不满意"/>
    <button id="transmit">给父页面传值</button>

    </div>
    </div>


    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/layer.m.js"></script>
    <script>
    var ph = $("#classDialog").html();
    var st = 'background:#fff;width:300px;top:-50px;';
    //弹出一个iframe层
    var index = $('#parentIframe').on('click', function(){
    layer.open({
    type: 1,
    fix: false, //不固定
    style: st,
    maxmin: true,
    content: ph,
    });
    });

    //给父页面传值
    $('#transmit').on('click', function(){
    var val = $('#name').val();
    $('#shuzhi').val(val);
    layer.close(index);
    });
    </script>
    0 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-11-30
    你理解了我上面发的你就会了,还有这不叫传回页面,这叫修改父页面某某元素的值
    另外你不能点了编辑框的代码按钮再把你的代码放进去么。
    0 回复
  • 前端
    2015-12-1
    @小付(活雷锋) [委屈] 第一个发的恢复我理解啦,我将他们部署在服务器上成功了~我第一次在社区提问,没看清上面那个代码按钮......[黑线]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="wap-font-scale" content="no" />
    <title>-选择分类-</title>
    </head>
    <body>
    <button id="parentIframe">小小提示层</button>
    <input id="shuzhi" />

    <!-- 弹窗 -->
    <div id="classDialog" style="display:none;">
    <div style="text-align: center;">

    <input id="name" value="不满意"/>
    <button id="transmit">给父层传值</button>

    </div>
    </div>


    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script>
    var ph = $("#classDialog").html();
    var st = 'background:#fff;width:300px;height:200px; top:-50px;';
    //弹出一个层
    var index = $('#parentIframe').on('click', function(){
    layer.open({
    type: 1,
    style: st,
    content: ph,
    });
    });
    var val = $('#name').val();
    //给父层传值
    $('#transmit').on('click', function(){
    $('#shuzhi').val(val);
    layer.close(index);
    });
    </script>
    </html>
    0 回复
  • 前端
    2015-12-1
    @小付(活雷锋) 我自己弄出来,还是很感谢你~~[心] 顺便将弄好的代码弄出来[太开心]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="wap-font-scale" content="no" />
    <title>-选择分类-</title>
    </head>
    <body>
    <button id="parentIframe">小小提示层</button>
    <input id="shuzhi" />

    <!-- 弹窗 -->
    <div id="classDialog" style="display:none;">
    <div style="text-align: center;">

    <input id="name" value="不满意"/>
    <button id="transmit">给父层传值</button>

    </div>
    </div>


    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/layer.js"></script>
    <script>
    var ph = $("#classDialog").html();
    var st = 'background:#fff;width:300px;height:200px; top:-50px;';
    //弹出一个层
    $('#parentIframe').on('click', function(){
    var a=layer.open({
    type: 1,
    style: st,
    content: ph,
    });
    });
    var val = $('#name').val();
    //给父层传值
    $(document).on("click", "#transmit", function(){
    parent.$('#shuzhi').val(val);
    layer.closeAll();
    });

    </script>
    </html>
    [太开心]
    0 回复
  • 前端
    2015-12-1
    @小付(活雷锋) 又出现新的问题啦......
    <input>里自由输入取不到数值啊。。。。。
    0 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-12-1
    @前端攻城狮 描述的不清楚呦~
    简单描述下在什么场景下用哪几句代码取的值
    0 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-12-1
    http://fly.layui.com/room/1/ 可以来这里和我在线聊~
    0 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-12-1
    小付 ( 26880 ) 2015/12/1 下午5:14:04
    content: ph, 改成 content: $("#classDialog"),
    小付 ( 26880 ) 2015/12/1 下午5:14:29
    你用 #id.html() 的方式 导致了页面有俩 id 一样的东西
    小付 ( 26880 ) 2015/12/1 下午5:15:13
    所以你取值一直取的之前没被修改的 input 所以取值失败
    前端攻城狮 ( 409248 ) 2015-12-01 17:15:28
    太棒了!!!!!!!!!!!!!!
    前端攻城狮 ( 409248 ) 2015-12-01 17:15:36
    可以了!!!!!!!!
    前端攻城狮 ( 409248 ) 2015-12-01 17:15:44
    [泪] 谢谢啦~~~~
    小付 ( 26880 ) 2015/12/1 下午5:15:58
    加油!
    0 回复
  • 前端
    2015-12-2
    @小付(活雷锋)
    content: ph, 改成 content: $("#classDialog"),
    用layer.m.js,就不能这样写了
    还是只能var ph = $("#classDialog").html();
    不然里面会没有内容呀,这该怎么办?[疑问]
    0 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-12-2
    @前端攻城狮 用 class .xx 这种,然后通过 回调函数中的 elem 找就可以了
    0 回复
  • 前端
    2015-12-2
    @小付(活雷锋) [泪] [泪] 我还是新手,没明白你说的是什么意思......能不能给点提示[可怜]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="wap-font-scale" content="no" />
    <title>-添加-</title>
    <link rel="stylesheet" href="css/base2013.css" type="text/css"/>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <style>
    </style>
    </head>
    <body>
    <div>
    <div class="box" style="padding: 20px 10px 10px 10px;border-bottom: 3px solid #d5d5d5;">

    <!-- 基本信息编辑 -->
    <div class="boxflex" style="margin-left: 8px;">
    <a href="javascript:namepopup()">
    <div class="divstyle">
    <input type="button" class="nonebutton" id="namebut" value="输入名称"/>
    <span style="float: right;">>></span>
    </div>
    </a>

    </div>
    </div>


    <!-- 编辑宝贝名称弹窗 -->
    <div id="nameDialog" style="display:none;" class="nameDialog">
    <div style="text-align: center;">
    <p class="titlepopup">编辑名称</p>
    <p class="whitebutton">
    <input id="goodsname" style="width: 70%;text-align: center;margin:5px;border: none;" value=""/>
    </p>
    <p class="bulebutton" id="surenamebut">确定</p>
    </div>
    </div>



    </div>
    </body>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/layer.m.js"></script>
    <script>
    // 名称弹窗
    function namepopup(){
    layer.open({
    type: 1,
    content: 'elem',
    style: 'background:#78BA32;top:-50px;',
    success: function(elem){
    console.log('.nameDialog');
    },
    });
    };


    // 获取名称
    $(document).on("click", "#surenamebut", function(){
    var goodsname = $('#goodsname').val();
    $('#namebut').val(goodsname);
    layer.closeAll();
    });

    </script>
    </html>
    [可怜]
    0 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-12-2
    @前端攻城狮 还是花点时间把基础打好吧,你这样很浪费时间
    我简单描述下,你理解下吧
    1.用 class 代替你的 id,比如 #surenamebut 换成 .surenamebut
    2.然后给 .surenamebut 绑定事件
    3.你引用了 jquery,获取 val 时候可以使用 jquery 提供的各种方法。比如
    $(document).on("click", ".surenamebut", function(){
    var goodsname = $(this).closest('.nameDialog').find('.goodsname').eq(0).val();
    $('#namebut').val(goodsname);
    layer.closeAll();
    });
    0 回复
  • 前端
    2015-12-2
    @小付(活雷锋) 谢谢啦,很抱歉浪费你的时间[委屈] ,我会好好补基础的
    0 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2015-12-2
    @前端 不是浪费我的时间,是浪费你的时间
    0 回复
  • Hlayui
    2017-12-19
    layer.closeAll();
    换成
    parent.layer.closeAll();
    能关闭子页面
    0 回复
本帖已设置禁止回复
本周热议
没有相关数据
layui

微信扫码关注 layui 公众号