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

pass value/variable from fancybox iframe to parent

提问by Someone33

I'am trying to pass a variable/ value from the fancybox iframe to the parent window without success.

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

Fancybox is launched from a link with

Fancybox 是从一个链接启动的

   class="fancybox fancybox.iframe"

My code in the fancybox.iframe is:

我在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;

   });
});

Where '{row.U_USERNAME}' is the username to find in the iframe.

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

Then, in the parent there's the following code:

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

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

  );
 });

But when the fancybox is closed, there's no alert showing up with the variable "test", nor the variable is showing up as a value or as a text in the input field of the form.

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

I've read and tried various solutions found here on stackoverflow without success.

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

Thanks in advance for helping

预先感谢您的帮助

EDIT

编辑

Here's an Example

这是一个例子

回答by arvic.rivera

When the fancybox is closed the iframe is removed from the document. So you must use beforeCloseevent instead of afterClose

当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/1/

EDIT:

编辑：

I edited your jsfiddle (http://jsfiddle.net/NXY7Y/9/). Update is in this link http://jsfiddle.net/NXY7Y/13/

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

Main page javscript:

主页 javascript:

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

No need to use afterCloseor beforeCloseevents. Just access the parent function setSelectedUserfrom the iframe on link click event like this:

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

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

回答by JFK

Some clarifications :

一些澄清：

• You should use .find()to find elements by selector (you are trying to find a variable .find(test), which is not a valid format).
• You should use .val()to get the contents of an inputfield or .val(new_value)to set the contents of an inputfield
• You should use .html()or .text()to get the contents of any element other than input,

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

example: having this html code

示例：有这个 html 代码

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

... and this jQuery code

...还有这个 jQuery 代码

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

... tempwill return hola.

……temp会回来的hola。

On the other hand, if you have control over the iframed page and it's under the same domain than the parent page, then you may not need to set any jQuery in the child page.

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

so, having this html in the child (iframed) page for instance

因此，例如在子（iframed）页面中包含此 html

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

You could set this jQuery in your parent page to get the contents of any clicked element in your child page :

您可以在父页面中设置此 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

Notice that we declared the var _tmpvarglobally so we can use it within different callbacks.

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

See JSFIDDLE

见JSFIDDLE