您的问题可以分为两部分：
- 如何将数据（存储在变量中）从父页面传递到 iframe（在 fancybox 中打开）
- 如何在 iframe 内操作数据（和/或将此类数据存储在变量中），然后在 fancybox 关闭时将这些值传递到父页面。
1）。将数据从父页面传递到（fancybox）iframe
我认为你最好的选择是将所有数据存储在一个 JavaScript 中object like :
var parentData = {};
...这样你就可以通过一个object到 iframe 而不是几个变量。然后您可以向其中添加不同的属性和值object like :
parentData.nameid = "1";
parentData.originalname = "Mary Poppins";
...或更多（如果您需要的话）。
您可能仍然希望通过 (HTML5) 静态传递该信息data属性如：
<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a>
...并推动data值转化为parentData object在花哨的盒子里beforeLoad回调如：
beforeLoad : function () {
parentData.nameid = $(this.element).data("nameid");
parentData.originalname = $(this.element).data("originalname");
}
...恕我直言，这会给你带来更大的灵活性。
现在，您在 iframed 页面中唯一需要做的就是引用那些特性 as parent.parentData.nameid and parent.parentData.originalname任何您需要它们的时候，例如
有这个html（iframe.html）
<p>The old name: <span id="originalname"></span></p>
<p>The id for this column is: <span id="nameid"></span></p>
...您可以使用此脚本写入父级的值object like :
$("#nameid").text(parent.parentData.nameid);
$("#originalname").text(parent.parentData.originalname);
Notice你不能这样做（如在 php 中）
<p>The old name: $originalname;</p>
...所以我们用了<span>标签通过 javascript 编写其内容。
2）。将数据从 iframe 页面传递到父页面。
您需要做的第一件事是在父页面中声明object存储来自 iframe 的数据和处理它的函数，如下所示：
var iframeData = {};
function setInformation(data) {
return iframeData = data;
};
然后在iframed页面中，可以写不同的内容特性/values to the iframeData object并运行setInformation()iframe 中的函数（在父页面中）将值传递给父页面，如下所示：
$(".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
<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>
... notice我把我想要传递的名字包裹在一个span标签。或者你可以将它分成 2spans like :
<span class="fname">Mary</span><span class="lname">Smith</span>
...并将它们写成单独的值，例如：
iframeData.fname = $(this).find("span.fname").text();
iframeData.lname = $(this).find("span.lname").text();
对于清除按钮，我只需重新初始化变量并关闭 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();
}
}
... notice我只会显示选择器#showhide-nameid-1 if the iframeData object的长度大于0。因此，我需要一个函数来验证object's length :
基于this https://stackoverflow.com/a/5533226/1055987回答，你可以这样做：
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;
};
...这将返回object's length.
最后的注释 :
由于 iframed 页面使用前缀引用父页面parent，如果在iframe之外打开会返回js错误。在尝试从父页面来回访问数据之前，您可能需要首先验证 iframe 页面是否确实包含在 iframe 内，如下所示：
if (window.self !== window.top) {
// the page is inside an iframe
}
See DEMO http://www.picssel.com/playground/jquery/passVariablesIframe_18oct14.html并随意探索这两个页面的源代码。
