javascript – Fancybox(jQuery) – 将信息从父级传递给iframe,iframe传回父级

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Fancybox(jQuery) – 将信息从父级传递给iframe,iframe传回父级，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5181字，纯文字阅读大概需要8分钟。

内容图文

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

解决方法:

您的问题可分为两部分：

>如何将数据(存储在变量中)从父页面传递到iframe(在fancybox中打开)
>如何在iframe内操作数据(和/或在变量中存储此类数据),然后在关闭fancybox时将这些值传递给父页面.

1).将数据从父页面传递到(fancybox)iframe

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

var parentData = {};

…所以你可以将一个对象传递给iframe而不是几个变量.然后,您可以向该对象添加不同的属性和值,如：

parentData.nameid       = "1";
parentData.originalname = "Mary Poppins";

……如果你需要的话,或者更多.

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

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

…并将数据值推送到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个跨度,例如：

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

…并将它们写成分隔值,例如：

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

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

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

…将返回对象的长度.

最后说明：

由于iframed页面使用前缀parent引用父页面,因此如果在iframe外部打开,则会返回js错误.在尝试在父页面之间来回访问数据之前,您可能需要首先验证iframed页面是否实际包含在iframe中,如：

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

请参阅DEMO,随意浏览两个页面的源代码.

内容总结

以上是互联网集市为您收集整理的javascript – Fancybox(jQuery) – 将信息从父级传递给iframe,iframe传回父级全部内容，希望文章能够帮你解决javascript – Fancybox(jQuery) – 将信息从父级传递给iframe,iframe传回父级所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端