JavaScript 中弹出窗口的回调

Callback for a popup window in JavaScript

本文关键字：回调 窗口 JavaScript      更新时间：2023-09-26

我希望我做得很好，在过去的几个小时里搜索互联网并尝试了所有内容，然后在这里发布，但我真的接近称之为不可能，所以这是我最后的手段。

我想要一个简单的东西（但在 JavaScript 中似乎很难）：

  1. 单击按钮 -> 打开窗口（使用 window.open）
  2. 在弹出窗口中执行操作并将值返回给父级（打开程序）

但我想以系统的方式实现它，为此弹出窗口定义一个回调; 像这样：

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

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

var callback = null;

不幸的是，这行不通，因为...

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

。只返回我最初设置的"null"。

我还尝试在窗口加载后在父窗口中设置回调（通过窗口.onload=...和 $（window）.ready（）），没有一个工作。

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

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

但结果是一样的。

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

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

HTML5的postMessage浮现在脑海中。它旨在完成您要完成的任务：从一个窗口发布消息并在另一个窗口中处理它。

https://developer.mozilla.org/en/DOM/window.postMessage

需要注意的是，这是一个相对较新的标准，因此较旧的浏览器可能不支持此功能。

http://caniuse.com/#feat=x-doc-messaging

使用起来非常简单：

要从源窗口发送消息：

window.postMessage("message", "*");
//'*' is the target origin, and should be specified for security

侦听目标窗口中的消息：

window.addEventListener
("message", function(e) {
console.log(e.data); //e.data is the string message that was sent.
}, true);

经过几个小时的实验，我想，我已经为我的问题找到了可行的解决方案。

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

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

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

。这是事件处理程序的代码：

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

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

正因为如此，我选择采用（最后，更好，视觉上更令人愉悦）解决方案Fancybox。不幸的是，默认情况下也没有办法区分实例。因此，我扩展了Fancybox，正如我在博客文章中所描述的那样。我在这里不包括博客文章的全文，因为这不是这个问题的主题。

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

相关文章：