Fancybox（jQuery） - 将信息从父级传递给iframe，iframe传回父级 [英] Fancybox (jQuery) - Passing information from parent to iframe and iframe back to parent
问题描述
我正在尝试在我的网页上打开一个fancybox iframe。将一些基本信息传递给iframe。然后我想让iframe回到它的父级。
I am trying to open a fancybox iframe on my page. Pass over some basic information to the iframe. Then I want to make it so that the iframe talks back to it's parent.
我正在静态传递nameid-1，尽管我真的希望将它作为变量例如： var nameid = $（this）.attr（'nameid'）
I am passing nameid-1 throughout statically, though I would really like to have this as variable such as: var nameid=$(this).attr('nameid')
我只是不这样做知道如何正确执行这一切，因为我是Ajax / Javascript的新手并且在逻辑上苦苦挣扎。
I just don't know how to execute this all correctly as I am new to Ajax/Javascript and struggling with the logic.
Base.html
JS：
<script type='text/javascript'>
//<![CDATA[
// Popup Function
$(document).ready(function () {
$('a.openinformation').fancybox({
openEffect: 'fade',
openSpeed: 500 //,
});
});
// Update from iFrame
function setInformation(userText) {
$('#displayfield-nameid-1').html(userText);
$('#showhide-nameid-1').show();
}
//]]>
</script>
HTML：
<div>
<a class="openinformation fancybox.iframe" href="iframe.html" nameid= "1" originalname="Mary Poppins" >Mary Poppins</a>
</div>
<div id ="showhide-nameid-1" style=" display:none; background:#0CF;">
<p>Replacement Name: <span id="displayfield-nameid-1"></span></p>
</div>
iframe.html
JS：
<script type='text/javascript'>
//<![CDATA[
// Start
$(window).load(function () {
// When Loaded get going.
$(document).ready(function () {
$('a.doupdate').click(function () {
parent.setInformation($(this).text());
parent.$.fancybox.close();
});
$('a.closeremove').click(function () {
parent.$('#showhide-nameid-1').hide();
parent.$.fancybox.close();
});
});
});
//]]>
</script>
HTML
<p>The old name: $originalname;</p>
<p>The id for this column is: $nameid</p>
<p>Please select a new name:</p>
<div><a class="doupdate" href="#">Display new married name : Mary Smith</a></div>
<div><a class="doupdate" href="#">Display new married name: Sandy Shore</a></div>
<div><a class="closeremove" href="#" id="1">Clear (Hide) married Names Box</a></div>
推荐答案
您的问题可分为两部分：
Your question can be dived in two parts :
- 如何将数据（存储在变量中）从父页面传递到iframe（在fancybox中打开）
- 如何在iframe中操作数据（和/或在变量中存储此类数据），然后在关闭fancybox时将这些值传递给父页面。
1）。将数据从父页面传递到（fancybox）iframe
1). Pass data from parent page to (fancybox) iframe
我认为您最好的选择是将所有数据存储在单个javascript 对象中，如：
I think your best choice is to store all your data in a single javascript object like :
var parentData = {};
...因此您可以将单个对象传递给iframe几个变量。然后，您可以向对象添加不同的属性和值，如：
... so you can pass a single object to the iframe instead of several variables. Then you can add different properties and values to that object like :
parentData.nameid = "1";
parentData.originalname = "Mary Poppins";
...或更多，如果您需要。
... or more if you need so.
您仍然可能希望通过（HTML5）数据属性静态传递该信息，例如：
You still may want to pass that information statically through (HTML5) data attributes like :
<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a>
...并推送数据值进入fancybox beforeLoad 回调中的 parentData 对象：
... and push the data values into the parentData object within the fancybox beforeLoad callback like :
beforeLoad : function () {
parentData.nameid = $(this.element).data("nameid");
parentData.originalname = $(this.element).data("originalname");
}
...这会给你更大的灵活性恕我直言。
... that would give you much more flexibility IMHO.
现在，您在iframed页面中唯一需要做的就是将那些属性称为 parent.parentData.nameid 和 parent.parentData.originalname 只要你需要它们，例如
Now, the only thing you need to do in the iframed page is to refer to those properties as parent.parentData.nameid and parent.parentData.originalname any time you need them, e.g.
有这个html （iframe.html）
having this html (iframe.html)
<p>The old name: <span id="originalname"></span></p>
<p>The id for this column is: <span id="nameid"></span></p>
...您可以使用此脚本编写父对象的值 like：
... you can use this script to write the values of the parent object like :
$("#nameid").text(parent.parentData.nameid);
$("#originalname").text(parent.parentData.originalname);
注意你做不到（如在php中）
Notice you cannot do (as in php)
<p>The old name: $originalname;</p>
...所以我们使用< span> 标签通过javascript写入他们的内容。
... so we used <span> tags to write their content via javascript.
2）。将数据从iframed页面传递到父页面。
2). Pass data from iframed page to parent page.
您需要做的第一件事是在您的父页面中声明一个对象来存储数据来自iframe和一个处理它的函数，如：
First thing you need to do is to declare in your parent page, an object to store data from the iframe and a function to process it like :
var iframeData = {};
function setInformation(data) {
return iframeData = data;
};
然后在iframed页面中，您可以编写不同的属性 / 值到 iframeData 对象并运行 setInformation（）函数（在父页面中）从iframe传递值到父页面，如：
Then in the iframed page, you can write different properties/values to the iframeData object and run the setInformation() function (in the parent page) from the iframe to pass the values to the parent page like :
$(".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，如
The code above assumes you have a similar html like
<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>
... 通知我把我要传递的名字包裹在一个 span 标记。您可以选择将其分为2 span ，例如：
... notice I wrapped the name I want pass in a span tag. Optionally you could separate it in 2 spans like :
<span class="fname">Mary</span><span class="lname">Smith</span>
...并将它们写成分隔值，如：
... and write them in separated values like :
iframeData.fname = $(this).find("span.fname").text();
iframeData.lname = $(this).find("span.lname").text();
对于清除按钮，我只需重新初始化变量并关闭fancybox，如
For the clear button, I would just reinitialize the variable and close fancybox like
$('a.closeremove').on("click", function (e) {
e.preventDefault();
iframeData = {}; // reset variable
parent.setInformation(iframeData); // pass it to parent page
parent.$.fancybox.close();
});
...并使用fancybox afterClose回调从父页面本身执行父页面的操作喜欢：
... and perform the manipulation of the parent page from the parent page itself using the fancybox afterClose callback like :
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 对象，我只会显示选择器 #showhide-nameid-1 s长度大于 0 。因为那样，我需要一个函数来验证对象的长度：
... notice I will only show the selector #showhide-nameid-1 if the iframeData object's length is bigger than 0. Because that, I need a function to validate the object's length :
基于这个答案，您可以这样做：
Based on this answer, you could do:
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;
};
...这将返回对象的长度。
最后一个注释：
由于iframed页面使用前缀 parent 引用父页面，如果它在iframe外部打开，它将返回js错误。在尝试从父页面来回访问数据之前，您可能需要首先验证iframed页面是否实际包含在iframe中：
Since the iframed page is referring to the parent page using the prefix parent, it will return js errors if it's opened outside an iframe. You may want to validate first if the iframed page is actually contained inside an iframe before trying to access data back and forth to/from the parent page like :
if (window.self !== window.top) {
// the page is inside an iframe
}
参见 DEMO ，随时浏览两个页面的源代码。
See DEMO and feel free to explore the source code of both pages.
这篇关于Fancybox（jQuery） - 将信息从父级传递给iframe，iframe传回父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
