javascript - 将值/变量从 fancybox iframe 传递到父级

Question

我试图将变量/值从 fancybox iframe 传递到父窗口，但没有成功。

Fancybox 是通过链接启动的

   class="fancybox fancybox.iframe"

我在 fancybox.iframe 中的代码是:

$(document).ready(function(){
   $('.insert_single').click(function(){
    var test =  $('.members_body').find('{row.U_USERNAME}');
    setTimeout(function(){ parent.$.fancybox.close();},300);return true;

   });
});

其中“{row.U_USERNAME}”是要在 iframe 中查找的用户名。

然后，在父级中有以下代码:

 $(document).ready(function(){
 $('.fancybox').fancybox(

  {
openEffect:'fade',
openSpeed:500,


    afterClose: function(){
    alert($(".fancybox-iframe").contents().find(test)); 
    $('#form input[name=username]').val()(test);return false;
    }
}                   

  );
 });

但是当 fancybox 关闭时，不会显示变量“test”的警报，该变量也不会在表单的输入字段中显示为值或文本。

我已经阅读并尝试了在 stackoverflow 上找到的各种解决方案，但没有成功。

提前感谢您的帮助

编辑

这是一个Example

Answer 1

当 fancybox 关闭时，iframe 将从文档中删除。因此，您必须使用 beforeClose 事件而不是 afterClose

$(document).ready(function() {
    $('a.fancybox').fancybox({
        openEffect:'fade',
        openSpeed:500,
        beforeClose: function() {
            // working
            var $iframe = $('.fancybox-iframe');
            alert($('input', $iframe.contents()).val());
        },
        afterClose: function() {
            // not working
            var $iframe = $('.fancybox-iframe');
            alert($('input', $iframe.contents()).val());
        }
    });
});

JSFiddle:http://jsfiddle.net/NXY7Y/1/

编辑:

我编辑了你的 jsfiddle ( http://jsfiddle.net/NXY7Y/9/ )。更新在此链接中 http://jsfiddle.net/NXY7Y/13/

主页javscript:

$(document).ready(function() {
    $('a.fancybox').fancybox({
        openEffect:'fade',
        openSpeed:500//,
        //beforeClose: function() {
        //    // working
        //    var $iframe = $('.fancybox-iframe');
        //    alert($('input', $iframe.contents()).val());
        //},
        //afterClose: function() {
        //    // not working
        //    var $iframe = $('.fancybox-iframe');
        //    alert($('input', $iframe.contents()).val());
        //}
    });
});

function setSelectedUser(userText) {
    $('#username').val(userText);
}

无需使用 afterClose 或 beforeClose 事件。只需在链接点击事件上从 iframe 访问父函数 setSelectedUser 即可，如下所示:

$(document).ready(function() {
    $('a.insert_single').click(function() {
        parent.setSelectedUser($(this).text());
        parent.$.fancybox.close();
    });
});