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

Question

我正在尝试在我的页面上打开一个 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 object 中，例如：

var parentData = {};

... 这样您就可以将单个 object 传递给 iframe 而不是多个变量。然后您可以向该 object 添加不同的属性和值，例如：

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

...恕我直言，这将为您提供更大的灵活性。

现在，您需要在 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>

...您可以使用此脚本编写父 object 的值，例如：

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

注意你不能这样做（如在 php 中）

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

...所以我们使用<span>标签通过javascript编写他们的内容。

---

2)。将数据从 iframed 页面传递到父页面。

您需要做的第一件事是在您的父页面中声明一个 object 来存储来自 iframe 的数据以及一个处理它的函数，例如：

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

然后在iframed页面中，可以将不同的properties/values写入iframeDataobject并运行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>

... notice 我将我想要传递的名称包裹在 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 = {}; // 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 object 的长度大于0，我只会显示选择器#showhide-nameid-1。因此，我需要一个函数来验证 object 的 length ：

根据this 的回答，您可以这样做：

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。

最后一点：

由于 iframe 页面使用前缀 parent 引用父页面，因此如果在 iframe 之外打开它会返回 js 错误。您可能需要先验证 iframe 页面是否实际包含在 iframe 中，然后再尝试来回访问父页面/从父页面来回访问数据，例如：

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

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