龙岩易富通网络科技有限公司

龙岩小程序开发,龙岩分销系统

子页面传递参数到父页面

2025.05.22 | 23阅读 | 0条评论 | javascript

window.postMessage 是一种跨文档通信的方法,允许来自一个文档(例如一个网页或Iframe)向另一个文档发送消息。这在Iframe中使用尤其有用,因为它允许父页面和Iframe之间的安全通信。实例中在父页面点击按钮弹出子页面窗口,子页面窗口关闭后需要传递参数到父页面。


父页面

window.addEventListener('message', function(event) {

    if (event.data.action === 'dataFromChild') {

        var id =  event.data.id;

        var sn =  event.data.sn;

        var name =  event.data.name;

        var price =  event.data.price;

        var thumb =  event.data.thumb;

        // 处理数据

        console.log(id);

    }

}, false);


子页面


$(".sel").click(function(){

      var id = $(this).data("id");

      var sn = $(this).data("sn");

      var name = $(this).data("name");

      var price = $(this).data("price");

      var thumb = $(this).data("thumb");

      window.parent.postMessage({ action: 'dataFromChild', id: id, sn: sn, name: name, price:price, thumb:thumb }, '*');

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

      parent.layer.close(index);  // 关闭layer

})


赞 (

发表评论