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(); }); });

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>STACKOVERFLOW</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

将值从fancybox iframe传递给parent

2 个答案: