Fancybox（jQuery） – 将信息从父级传递给iframe，iframe传回父级
我想在我的页面上打开一个fancybox iframe。 将一些基本信息传递给iframe。 然后我想做到这一点，以便iframe回复它的父母。
我静态地传递nameid-1，虽然我真的希望将其作为变量，例如： var nameid=$(this).attr('nameid')
我只是不知道如何正确执行这一切，因为我是Ajax / Javascript的新手并且在逻辑上苦苦挣扎。
base.html文件
JS：
//
HTML：
Replacement Name:
Iframe.html的
JS：
//
HTML
The old name: $originalname;
The id for this column is: $nameid
Please select a new name:
您的问题可以分为两部分：
- 如何将数据（存储在变量中）从父页面传递到iframe（在fancybox中打开）
- 如何在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 ，随时浏览两个页面的源代码。