的fancybox（jQuery的） - 由父母传递信息的iframe和iframe回父的fancy

我试图打开我的网页上的fancybox iframe中。 越过一些基本信息的iframe。 然后我想让这个iframe的谈判回到它的父。

我传递填充NameID-1在整个静态，但我真的想有这样的可变如： var nameid=$(this).attr('nameid')

我只是不知道，因为我是新来的Ajax / Javascript和与逻辑挣扎如何将所有正确执行此操作。

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>

Answer 1:

你提的问题可以分为两个部分跳水：

1. 如何从父页面的数据（存储在变量）传递到一个iframe（在打开的fancybox）
2. 如何操纵数据（和/或存储在变量，例如数据）的iframe内，然后当的fancybox关闭通过这些值到父页面。

1）。 通过从父页面的数据（的fancybox）IFRAME

我觉得你最好的选择是把所有的数据存储在一个单一的JavaScript 对象 ，如：

var parentData = {};

......这样你就可以通过一个单一对象的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值到parentData中的fancybox内对象 beforeLoad回调，如：

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

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

现在，你需要在iframed网页上做的唯一的事情是指那些属性 parent.parentData.nameid和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>

...你可以使用这个脚本来写这样的父对象的值：

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

请注意 ，你不能这样做（如PHP）

<p>The old name: $originalname;</p>

......所以我们用<span>标签来写通过JavaScript的内容。

---

2）。 传球的iframe页面数据父页面。

你需要做的第一件事就是你的父页面来声明，其目的在于从iframe和处理它像一个函数存储数据：

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

然后，在iframed网页上，可以编写不同的属性 / 值对iframeData 对象并运行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>

... 注意到我包我想传递一个名字span标签。 可选的，你可以在二分开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 = {}; // 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();
    }
}

... 通知我将只显示选择器#showhide-nameid-1如果iframeData 对象的长度比大0 。 因为这一点，我需要一个函数来验证该对象的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错误。 你可能想试图从像父页面访问数据来回/前如果iframed网页上实际包含的iframe中，以验证第一：

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

见DEMO ，感觉自由探索两个页面的源代码。

文章来源: Fancybox (jQuery) - Passing information from parent to iframe and iframe back to parent