Fancybox（jQuery） – 将信息从父级传递给iframe，iframe传回父级

我想在我的页面上打开一个fancybox iframe。 将一些基本信息传递给iframe。 然后我想做到这一点，以便iframe回复它的父母。

我静态地传递nameid-1，虽然我真的希望将其作为变量，例如： var nameid=$(this).attr('nameid')

我只是不知道如何正确执行这一切，因为我是Ajax / Javascript的新手并且在逻辑上苦苦挣扎。

base.html文件

JS：

  //  

HTML：

 
 Mary Poppins 
 
 
Replacement Name: 
  

Iframe.html的

JS：

  //  

HTML

 
The old name: $originalname;
 
The id for this column is: $nameid
 
Please select a new name:
 
Display new married name : Mary Smith
 
Display new married name: Sandy Shore
 
Clear (Hide) married Names Box 

Answer 1

您的问题可以分为两部分：

1. 如何将数据（存储在变量中）从父页面传递到iframe（在fancybox中打开）
2. 如何在iframe内操作数据（和/或在变量中存储此类数据），然后在关闭fancybox时将这些值传递给父页面。

1）。 将数据从父页面传递到（fancybox）iframe

我认为您最好的选择是将所有数据存储在一个javascript 对象中，例如：

 var parentData = {}; 

…所以你可以将一个对象传递给iframe而不是几个变量。 然后，您可以向该对象添加不同的属性和值，如：

 parentData.nameid = "1"; parentData.originalname = "Mary Poppins"; 

……如果你需要的话，或者更多。

您仍然可能希望通过（HTML5） data属性静态传递该信息，例如：

 Mary Poppins 

…并将data值推parentData fancybox beforeLoad回调中的parentData 对象 ，如：

 beforeLoad : function () { parentData.nameid = $(this.element).data("nameid"); parentData.originalname = $(this.element).data("originalname"); } 

…这会给你更多的灵活性恕我直言。

现在，您在iframed页面中唯一需要做的就是在您需要时将这些属性称为parent.parentData.nameid和parent.parentData.originalname ，例如

有这个HTML（https://stackoverflow.com/questions/26426934/fancybox-jquery-passing-information-from-parent-to-iframe-and-iframe-back-to/iframe.html）

 
The old name: 
 
The id for this column is:  

…您可以使用此脚本编写父对象的值，如：

 $("#nameid").text(parent.parentData.nameid); $("#originalname").text(parent.parentData.originalname); 

注意你不能这样做（如在php中）

 
The old name: $originalname; 

…所以我们使用标签通过javascript编写内容。

---

2）。 将数据从iframed页面传递到父页面。

您需要做的第一件事是在您的父页面中声明一个用于存储来自iframe的数据的对象以及一个处理它的函数，如：

 var iframeData = {}; function setInformation(data) { return iframeData = data; }; 

然后在iframed页面中，您可以为iframeData 对象写入不同的属性 / 值 ，并从iframe运行setInformation()函数（在父页面中），将值传递给父页面，如：

 $(".doupdate").on("click", function (e) { e.preventDefault(); iframeData.newname = $(this).find("span").text(); // set object property/value parent.setInformation(iframeData); // pass it to parent page parent.$.fancybox.close(); }); 

上面的代码假设您有类似的html

 Display new married name : Mary Smith 

… 注意我在span标签中包含了我想传递的名称。 您可以选择将其分为2个spans如：

 MarySmith 

…并将它们写成分隔值，例如：

 iframeData.fname = $(this).find("span.fname").text(); iframeData.lname = $(this).find("span.lname").text(); 

对于clear按钮，我只需要重新初始化变量并关闭fancybox

 $('a.closeremove').on("click", function (e) { e.preventDefault(); iframeData = {}; // reset variable parent.setInformation(iframeData); // pass it to parent page parent.$.fancybox.close(); }); 

…并使用fancybox afterClose回调从父页面本身执行父页面的操作，如：

 afterClose : function () { if ( objLength(iframeData) > 0 ) { $('#displayfield-nameid-1').html(iframeData.newname); $('#showhide-nameid-1').show(); } else { $("#displayfield-nameid-1").empty(); $('#showhide-nameid-1').hide(); } } 

… 注意如果iframeData 对象的长度大于0我只会显示选择器#showhide-nameid-1 。 因为那样，我需要一个函数来validation对象的length ：

基于这个答案，你可以这样做：

 function objLength(iframeData) { // ref https://stackoverflow.com/a/5533226/1055987 var count = 0, i; for (i in iframeData) { if (iframeData.hasOwnProperty(i)) { count++; } } return count; }; 

…将返回对象的length 。

最后说明 ：

由于iframed页面使用前缀parent引用父页面，如果它在iframe外部打开，它将返回js错误。 在尝试从父页面来回访问数据之前，您可能需要首先validationiframed页面是否实际包含在iframe中，如：

 if (window.self !== window.top) { // the page is inside an iframe } 

请参阅DEMO ，随时浏览两个页面的源代码。