Javascript Fancybox（jQuery）-将信息从父对象传递到iframe，并将iframe返回到父对象

我正在尝试在我的页面上打开fancybox iframe。将一些基本信息传递给iframe。然后我想让iframe与它的父对象对话

我以静态方式传递nameid-1，但我确实希望将其作为变量，例如：var nameid=$this.attr'nameid'

我只是不知道如何正确地执行这一切，因为我对Ajax/Javascript还不熟悉，而且还在为逻辑而挣扎

Base.html

JS:

HTML:

iframe.html

<p>The old name: <span id="originalname"></span></p>
<p>The id for this column is: <span id="nameid"></span></p>

JS:

HTML

---

你的问题可以分为两部分：

如何将存储在变量中的数据从父页面传递到fancybox中打开的iframe 如何操作数据和/或将这些数据存储在iframe内的变量中，然后在fancybox关闭时将这些值传递给父页面。 一,。将数据从父页面传递到fancybox iframe

我认为最好的选择是将所有数据存储在单个javascript对象中，如：

。。。因此，您可以向iframe传递单个对象，而不是多个变量。然后可以向该对象添加不同的属性和值，如：

。。。或者更多，如果你需要的话

您可能仍然希望通过HTML5数据属性静态传递该信息，如：

<a data-nameid="1" data-originalname="Mary Poppins" href="iframe.html" class="openinformation">Mary Poppins</a>

。。。那会给你更多的灵活性

现在，在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>

注意，您不能像在php中那样做

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

然后在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();
});

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

上面的代码假设您有一个类似html的

<a class="doupdate" href="#">Display new married  name :  <span>Mary Smith</span></a>

。。。并将它们分别写在不同的值中，如：

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回调从父页本身执行父页操作，如：

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

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。因此，我需要一个函数来验证对象的长度：

根据答案，您可以执行以下操作：

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错误。在尝试来回访问父页面或从父页面访问数据之前，您可能希望首先验证iframe页面是否实际包含在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();
});

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

---

请参阅并自由探索这两个页面的源代码。

感谢您提供了如此好的书面和解释性回复。我真的很感激知道答案的道理。不仅仅是答案本身。超级大谢谢！

<span class="fname">Mary</span><span class="lname">Smith</span>

iframeData.fname = $(this).find("span.fname").text();
iframeData.lname = $(this).find("span.lname").text();

$('a.closeremove').on("click", function (e) {
    e.preventDefault();
    iframeData = {}; // reset variable
    parent.setInformation(iframeData); // pass it to parent page
    parent.$.fancybox.close();
});

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();
    }
}

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;
};

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