将值/变量从 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”没有出现警告，变量也没有在表单的输入字段中显示为值或文本。

我已阅读并尝试了在 * 上找到的各种解决方案，但均未成功。

提前感谢您的帮助

编辑

这是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 on link click 事件访问父函数setSelectedUser，如下所示：

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

Answer 2

一些说明：

• 您应该使用.find() 通过选择器查找元素（您正在尝试查找变量.find(test)，它不是有效格式）。
• 您应该使用.val() 获取input 字段的内容或使用.val(new_value) 设置input 字段的内容
• 您应该使用.html() 或.text() 来获取除input 之外的任何元素的内容，

例子：有这个html代码

<p class="test">hola</p>

...还有这个 jQuery 代码

var temp = $(".test").html();

...temp 将返回 hola。

另一方面，如果您可以控制 iframed 页面并且它与父页面在同一个域下，那么您可能不需要在子页面中设置任何 jQuery。

所以，例如，在子（iframed）页面中有这个 html

<div class="members_body">
    <p>GOOGLE</p>
    <p>JSFIDDLE</p>
    <p>*</p>
</div>

您可以在父页面中设置此 jQuery 以获取子页面中任何单击元素的内容：

var _tmpvar; // the var to use through the callbacks
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        type: "iframe",
        afterShow: function () {
            var $iframe = $('.fancybox-iframe');
            $iframe.contents().find(".members_body p").each(function (i) {
                $(this).on("click", function () {
                    _tmpvar = $('.members_body p:eq(' + i + ')', $iframe.contents()).html();
                    $.fancybox.close();
                }); // on click
            }); // each
        },
        afterClose: function () {
            $('#form input[name=username]').val(_tmpvar);
        }
    });
}); // ready

请注意，我们在全局范围内声明了 var _tmpvar，以便我们可以在不同的回调中使用它。

见JSFIDDLE