Fancybox (jQuery） - 将信息从父级传递到 iframe，并将 iframe 传回父级

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

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

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

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

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

1. 如何将数据(存储在变量中(从父页面传递到iframe(在花式框中打开(
2. 如何在 iframe 中操作数据(和/或将此类数据存储在变量中(，然后在 fancybox 关闭时将这些值传递给父页面。

1(. 将数据从父页面传递到(花式框(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值推入 fancybox beforeLoad回调中的 parentData 对象中，如下所示：

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(. 将数据从 iframed 页面传递到父页面。

您需要做的第一件事是在父页面中声明一个用于存储来自 iframe 的数据的对象和一个用于处理它的函数，如下所示：

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

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

上面的代码假设你有一个类似的 html，比如

<a class="doupdate" href="#">Display new married  name :  <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();

对于清除按钮，我只需重新初始化变量并关闭花哨框，例如

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

。通知我只会在iframeData对象的长度大于0时显示选择器#showhide-nameid-1。因此，我需要一个函数来验证对象的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 错误。您可能需要先验证 iframe 页面是否实际包含在 iframe 中，然后再尝试来回访问父页面的数据，例如：

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

请参阅 DEMO 并随意探索两个页面的源代码。