JavaScript 中弹出窗口的回调

Mir*_*dak 4 javascript window callback popup

我希望我的作业做得很好,在过去的几个小时里搜索了互联网并尝试了一切,然后才在这里发帖,但我真的几乎认为这是不可能的,所以这是我最后的手段。

我想要一件简单的事情(但在 JavaScript 中似乎很难):

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

但我想以系统的方式实现它,为这个弹出窗口定义一个回调;就像是:

var wnd = window.open(...)
wnd.callback = function(value) {
    console.log(value);
};
Run Code Online (Sandbox Code Playgroud)

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

var callback = null;
Run Code Online (Sandbox Code Playgroud)

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

$('#action').click(function() {
    console.log(callback);
});
Run Code Online (Sandbox Code Playgroud)

...仅返回我最初设置的“null”。

我还尝试在窗口加载后在父窗口中设置回调(都通过 window.onload=... 和 $(window).ready()),但没有任何效果。

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

function registerCallback(_callback)
{
    callback = _callback; // also window.callback = _callback;
}
Run Code Online (Sandbox Code Playgroud)

但结果相同。

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

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

Jef*_*ney 5

postMessage我想到了HTML5 。它的设计目的正是为了完成您想要完成的任务:从一个窗口发布消息并在另一个窗口中处理它。

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
Run Code Online (Sandbox Code Playgroud)

要侦听目标窗口中的消息:

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