将值从fancybox iframe传递给parent

我试图将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上找到的各种解决方案但没有成功。

在此先感谢您的帮助

编辑

这是一个例子

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代码

 
hola 

…和这个jQuery代码

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

…… temp会回归hola 。

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

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

 
 
GOOGLE
 
JSFIDDLE
 
STACKOVERFLOW
  

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