将值/变量从 fancybox iframe 传递给父级

Posted 2023-05-09

【中文标题】将值/变量从 fancybox iframe 传递给父级

【英文标题】：pass value/variable from fancybox iframe to parent

【发布时间】：2014-07-04 03:25:21

【问题描述】：

我正在尝试将来自 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

【参考方案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();
    );
);

【讨论】：

('row.U_USERNAME') 不是 iframe 中的输入字段。当点击 iframe 中用户名旁边的链接时，我会得到这个用户名 ($('.insert_single').click(function())。然后我想将此用户名作为值放入父窗口中的文本字段中。

我只是举了一个例子，说明如何访问 iframe 中的任何元素以及何时/何地必须这样做 (beforeClose)。用您的选择器替换选择器“输入”...

作为警报消息，我收到object Object。我在beforeClose 函数中的代码是：` var $iframe = $('.fancybox-iframe');alert($('.insert_single', $iframe.contents()));` 这是问题1。第二个问题是：如何在文本字段中获取用户名。这是FIDDLE

抱歉，我忘记将类添加到链接中。更新的小提琴是http://jsfiddle.net/NXY7Y/9/

+1 - 我发布了一个替代解决方案，没有在子页面中设置任何 jQuery。

【参考方案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

【讨论】：

不错的一个。我喜欢在afterClose 上设置输入文本的效果。 +1