Fancybox (jQuery) - 将信息从父级传递到 iframe，然后将 iframe 传递回父级 [英] Fancybox (jQuery) - Passing information from parent to iframe and iframe back to parent
问题描述
我想在我的页面上打开一个fancybox iframe.将一些基本信息传递给 iframe.然后我想让 iframe 与它的父级对话.
我在整个过程中静态传递 nameid-1，但我真的希望将其作为变量，例如:var nameid=$(this).attr('nameid')
我只是不知道如何正确执行这一切，因为我是 Ajax/Javascript 的新手并且在逻辑上挣扎.
Base.html
JS:
HTML:
<a class="openinformationfancybox.iframe" href="iframe.html" nameid="1" originalname="Mary Poppins" >Mary Poppins</a><div id ="showhide-nameid-1" style=" display:none; background:#0CF;"><p>替换名称:<span id="displayfield-nameid-1"></span></p>
iframe.html
JS:
HTML
<p>旧名称:$originalname;</p><p>该列的 id 是:$nameid</p><p>请选择一个新名称:</p><div><a class="doupdate" href="#">显示新婚后姓名:Mary Smith</a></div><div><a class="doupdate" href="#">显示新婚后姓名:Sandy Shore</a></div><div><a class="closeremove" href="#" id="1">清除(隐藏)已婚姓名框</a></div>你的问题可以分为两部分:
- 如何将数据(存储在变量中)从父页面传递到 iframe(在fancybox 中打开)
- 如何在 iframe 中操作数据(和/或将此类数据存储在变量中)，然后在 fancybox 关闭时将这些值传递给父页面.
1).将数据从父页面传递到 (fancybox) iframe
我认为您最好的选择是将所有数据存储在单个 javascript 对象 中，例如:
var parentData = {};... 这样您就可以将一个 object 传递给 iframe 而不是多个变量.然后您可以向该对象添加不同的属性和值，例如:
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 值推送到fancybox beforeLoad 回调中的 parentData object 中，例如:
beforeLoad : function () {parentData.nameid = $(this.element).data("nameid");parentData.originalname = $(this.element).data("originalname");}...恕我直言，这会给你更多的灵活性.
现在，您在 iframe 页面中唯一需要做的就是将那些 属性 引用为 parent.parentData.nameid 和 parent.parentData.originalname 任何时候您需要它们，例如
有这个 html (iframe.html)
<p>旧名称:<span id="originalname"></span></p><p>该列的 id 是:<span id="nameid"></span></p>...您可以使用此脚本编写父对象的值，例如:
$("#nameid").text(parent.parentData.nameid);$("#originalname").text(parent.parentData.originalname);注意你不能做(如在 php 中)
<p>旧名称:$originalname;</p>...所以我们使用 <span> 标签通过 javascript 编写他们的内容.
2).将数据从 iframe 页面传递到父页面.
您需要做的第一件事是在您的父页面中声明一个对象来存储来自 iframe 的数据以及一个处理它的函数，例如:
var iframeData = {};功能集信息(数据){返回 iframeData = 数据；};然后在 iframe 页面中，可以将不同的 properties/values 写入 iframeData object 并运行来自 iframe 的 setInformation() 函数(在父页面中)将值传递给父页面，如:
$(".doupdate").on("click", function (e) {e.preventDefault();iframeData.newname = $(this).find("span").text();//设置对象属性/值parent.setInformation(iframeData);//传递给父页面parent.$.fancybox.close();});上面的代码假设你有一个类似的 html
<a class="doupdate" href="#">显示新婚后姓名:<span>Mary Smith</span></a>... 注意 我将要传递的名称包含在 span 标记中.或者，您可以将其分成 2 个 spans ，例如:
<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 = {};//重置变量parent.setInformation(iframeData);//传递给父页面parent.$.fancybox.close();});... 并使用fancybox afterClose 回调从父页面本身执行对父页面的操作，例如:
afterClose : function () {如果(objLength(iframeData)> 0){$('#displayfield-nameid-1').html(iframeData.newname);$('#showhide-nameid-1').show();} 别的 {$("#displayfield-nameid-1").empty();$('#showhide-nameid-1').hide();}}... 注意 如果 iframeData object 我只会显示选择器 #showhide-nameid-1> 的长度大于 0.因为那样，我需要一个函数来验证 object 的 length :
根据这个答案，您可以:
function objLength(iframeData) {//参考 https://stackoverflow.com/a/5533226/1055987无功计数= 0，我；for (i in iframeData) {如果 (iframeData.hasOwnProperty(i)) {计数++；}}返回计数；};... 返回对象的length.
最后一点:
由于 iframe 页面使用前缀 parent 引用父页面，如果它在 iframe 之外打开，它将返回 js 错误.您可能需要先验证 iframe 页面是否实际包含在 iframe 中，然后再尝试从父页面来回访问数据，例如:
if (window.self !== window.top) {//页面在 iframe 内}请参阅DEMO 并随意探索两个页面的源代码.
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.
I am passing nameid-1 throughout statically, though I would really like to have this as variable such as: var nameid=$(this).attr('nameid')
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 :
- How to pass data (stored in variables) from parent page to an iframe (opened in fancybox)
- How to manipulate data (and/or store such data in variables) inside the iframe and then pass those values to the parent page when fancybox is closed.
1). Pass data from parent page to (fancybox) iframe
I think your best choice is to store all your data in a single javascript object like :
var parentData = {};
... 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.
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>
... 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.
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.
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>
... you can use this script to write the values of the parent object like :
$("#nameid").text(parent.parentData.nameid);
$("#originalname").text(parent.parentData.originalname);
Notice you cannot do (as in php)
<p>The old name: $originalname;</p>
... so we used <span> tags to write their content via javascript.
2). Pass data from iframed page to parent page.
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;
};
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();
});
The code above assumes you have a similar html like
<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>
... 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();
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();
});
... 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();
}
}
... 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;
};
... which will return the object's length.
Last note :
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
}
See DEMO and feel free to explore the source code of both pages.
这篇关于Fancybox (jQuery) - 将信息从父级传递到 iframe，然后将 iframe 传递回父级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
