JavaScript 中弹出窗口的回调

2022-01-20 00:00:00 callback popup window javascript

我希望我的功课做得很好，在网上搜索了最后几个小时并尝试了一切，然后才发到这里，但我真的差点认为这是不可能的，所以这是我最后的选择.

I hope I did my homework well, searching the Internets for the last couple of hours and trying everything before posting here, but I'm really close to call it impossible, so this is my last resort.

我想要一个简单的东西(但在 JavaScript 中似乎很难):

I want a simple thing (but seems like hard in JavaScript):

  1. 单击按钮 -> 打开窗口(使用 window.open)
  2. 在弹窗中执行一个动作，并将值返回给父级(opener)

但我想以系统的方式实现它，为此弹出定义一个回调；类似:

But I want to achieve it in a systematic way, having a callback defined for this popup; something like:

var wnd = window.open(...)
wnd.callback = function(value) {
    console.log(value);
};

我尝试在弹窗JS代码中定义回调属性:

I've tried defining the callback property in popup window JS code:

var callback = null;

不幸的是，这不起作用，因为...

Unfortunately, that does not work, as...

$('#action').click(function() {
    console.log(callback);
});

...返回我最初设置的那个null".

... returns just that "null" I set initially.

我还尝试在窗口加载后在父窗口中设置回调(通过 window.onload=... 和 $(window).ready())，但没有成功.

I've also tried setting the callback in a parent window after window load (both thru window.onload=... and $(window).ready()), none worked.

我也尝试在子窗口源代码中定义一些方法来在内部注册回调:

I've also tried defining some method in child window source code to register callback internally:

function registerCallback(_callback)
{
    callback = _callback; // also window.callback = _callback;
}

但结果相同.

而且我没有更多的想法.当然，使用 window.opener 设置值很简单，但我会失去这个子窗口所需的大部分灵活性(实际上是 DAM 系统的资产选择器).

And I don't have any more ideas. Sure, it would be simple setting the value using window.opener, but I'll loose much of a flexibility I need for this child window (actually an asset selector for DAM system).

如果您有一些想法，请分享.谢谢你一百万！

If you have some ideas, please share them. Thank you a million!

推荐答案

经过几个小时的实验，我想，我找到了一个可行的解决方案.

After few more hours of experiments, I think, I've found a viable solution for my problem.

重点是从父窗口引用 jQuery 并在此窗口上触发 jQuery 事件(我是 Mac 用户，但我想，jQuery 具有跨平台工作的事件，因此 IE 兼容性在这里不是问题).

The point is to reference jQuery from parent window and trigger a jQuery event on this window (I'm a Mac user but I suppose, jQuery has events working cross-platform, so IE compatibility is not an issue here).

这是我的锚点点击处理程序代码...

This is my code for click handler on anchor...

$(this).find('a[x-special="select-asset"]').click(function() {
    var evt = jQuery.Event('assetSelect', {
        url:        'this is url',
        closePopup: true,
    });
    var _parent = window.opener;
    _parent.jQuery(_parent.document).trigger(evt);
});

...这是事件处理程序的代码:

... and this is the code of event handler:

$(document).bind('assetSelect', function (evt) {
    console.log(evt);
});

此解决方案很好，如果您不需要区分资产选择窗口的多个实例(只有一个窗口会调度assetSelect"事件).我还没有找到一种方法将一种标记参数传递给窗口，然后在事件中将其传回.

This solution is fine, if you don't need to distinguish between multiple instances of the asset selection windows (only one window will dispatch "assetSelect" event). I have not found a way to pass a kind of tag parameter to window and then pass it back in event.

因此，我选择了 Fancybox 解决方案(最终，更好、视觉上更令人愉悦).不幸的是，默认情况下也无法区分实例.因此，正如我在博客文章中所描述的那样，我扩展了 Fancybox.此处不包括博文全文，因为不是本题的主题.

Because of this, I've chosen to go along with (at the end, better and visually more pleasant) solution, Fancybox. Unfortunately, there is no way - by default - to distinguish between instances either. Therefore, I've extended Fancybox as I've described in my blog post. I'm not including the full text of blog post here, because is not the topic of this question.

博文网址:http://82517.tumblr.com/post/23798369533/using-fancybox-with-iframe-as-modal-dialog-on-a-web

相关文章