javascript - fancybox beforeClose 问题

Question

我有一个在 fancybox(版本 2.1.5)iframe 中实现的表单。人们可以选择不填写表格并点击“X”关闭 fancybox 表格，或者填写表格并点击注册。

我有一个 beforeClose 回调设置来设置 cookie 并做一些工作。但我希望仅当有人单击“X”或 Esc 键时才触发此操作。看下面的代码

$.fancybox.open({
    type: "iframe",
    href: "/[url].php",
    autoSize: true,
    height: "auto",
    margin: 0,
    padding: 0,
    autoCenter: true,
    maxWidth: 460,
    maxHeight: 615,
    modal: false,
    iframe: {
        scrolling: "no"
    },
    beforeClose: function () {
        //set cookie code
    },
});

但如果有人要注册，它会显示一条感谢消息 2 秒，然后关闭 fancybox。这是通过使用 window.parent.$.fancybox.close(); 查看下面的详细代码

$.post('/register.php', post_vars, function(data) {
    window.parent.$.fancybox.close();
});

但是我不希望在我从 iFrame 关闭它时调用 beforeClose 事件，或者即使它被调用，我也需要以某种方式知道它已经从 iframe 完成 &不使用“X”按钮。

有办法区分吗？

Answer 1

我可以想出不同的方法来做到这一点，比如将自定义 事件 绑定(bind)到 fancybox 关闭按钮 或使用 keyup 捕获 escape 键或keypress 等

我想最简单的方法是在父页面中创建一个自定义关闭函数，例如:

var closedFromIframe = false;
function customClose() {
    closedFromIframe = true;
    jQuery.fancybox.close();
}

当从 iframed 页面调用时，此函数将关闭 fancybox(从父页面本身)并且将启用(先前定义的)closedFromIframe 标志，所以不是这个:

$.post('/register.php', post_vars, function(data) {
    window.parent.$.fancybox.close();
});

...你可以做

$.post('/register.php', post_vars, function(data) {
    window.parent.customClose();
});

然后，在您的 fancybox 脚本中，您可以在 beforeClose 回调中验证 closedFromIframe flag 的状态，并执行您需要的任何操作:

$.fancybox.open({
    // your API options
    beforeClose : function () {
        if (closedFromIframe) {
            // closed from iframe custom function
        } else {
            // close button -or- escape key
        }
    },
    afterClose : function () {
        closedFromIframe = false; // reset flag
    }
});

注意我们还在 closedFromIframe 回调中重置 afterClose 标志。

查看此实现的 DEMO。