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

Posted 2023-05-09

【中文标题】Fancybox (jQuery) - 将信息从父级传递到 iframe 并将 iframe 传递回父级

【英文标题】：Fancybox (jQuery) - Passing information from parent to iframe and iframe back to parent

【发布时间】：2014-12-13 03:36:11

【问题描述】：

我正在尝试在我的页面上打开一个 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>

【参考方案1】：

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

如何将数据（存储在变量中）从父页面传递到 iframe（在 fancybox 中打开） 如何在 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://***.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 并随意探索这两个页面的源代码。

【讨论】：

感谢您写得如此出色和解释清楚的回复。我真的很感激知道答案的原因。不仅仅是答案本身。非常感谢！