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

您的问题可分为两部分：

如何将数据（存储在变量中）从父页面传递到iframe（在fancybox中打开）
如何在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值推送到fancybox parentData回调中的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）。将数据从iframed页面传递到父页面。

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

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

然后在iframed页面中，您可以将不同的属性 / 值写入iframeData 对象并运行{{来自iframe的函数（在父页面中）将值传递给父页面，如：

setInformation()

上面的代码假设您有类似的HTML

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

... 通知我在<a class="doupdate" href="#">Display new married name : <span>Mary Smith</span></a>标记中包含了我想传递的名称。您可以选择将其分为2 span，如：

spans

...并将它们写成分隔的值，如：

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

对于clear按钮，我只需重新初始化变量并关闭像

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

...并使用fancybox afterClose回调从父页面本身执行父页面的操作，如：

$('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(); } } 对象的长度大于{我只会显示选择器#showhide-nameid-1 {1}}。因为那样，我需要一个函数来验证对象的iframeData：

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

...将返回对象＆＃39; length。

最后一点：

由于iframed页面使用前缀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; };引用父页面，如果它在iframe外部打开，则会返回js错误。在尝试在父页面之间来回访问数据之前，您可能需要首先验证iframed页面是否实际包含在iframe中：

length

请参阅 DEMO ，随时浏览这两个页面的源代码。

Fancybox（jQuery） - 将父信息传递给iframe，将iframe传递回父级

1 个答案: