3

ここ数時間インターネットを検索し、ここに投稿する前にすべてを試して、宿題をうまくやったことを願っていますが、これは不可能と言っても過言ではないので、これが私の最後の手段です。

私は簡単なことをしたいです（しかし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」だけを返します。

また、ウィンドウのロード後に親ウィンドウでコールバックを設定しようとしました（window.onload = ...と$（window）.ready（）の両方を介して）、どれも機能しませんでした。

また、コールバックを内部的に登録するために、子ウィンドウのソースコードでいくつかのメソッドを定義しようとしました。

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

しかし、同じ結果になります。

そして、私にはこれ以上のアイデアはありません。もちろん、window.openerを使用して値を設定するのは簡単ですが、この子ウィンドウ（実際にはDAMシステムのアセットセレクター）に必要な柔軟性の多くを失います。

アイデアがあれば共有してください。百万ありがとう！

4

2 に答える 2

4

HTML5's postMessage comes to mind. It's designed to do exactly what you're trying to accomplish: post messages from one window and process it in another.

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

The caveat is that it's a relatively new standard, so older browsers may not support this functionality.

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

It's pretty simple to use:

To send a message from the source window:

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

To listen for messages in a target window:

window.addEventListener
("message", function(e) {
console.log(e.data); //e.data is the string message that was sent.
}, true);
于 2012-05-25T23:40:55.030 に答える
1

さらに数時間の実験の後、私は自分の問題に対する実行可能な解決策を見つけたと思います。

重要なのは、親ウィンドウから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);
});

アセット選択ウィンドウの複数のインスタンスを区別する必要がない場合は、このソリューションで問題ありません（1つのウィンドウのみが「assetSelect」イベントをディスパッチします）。ある種のタグパラメータをウィンドウに渡して、イベントで戻す方法が見つかりませんでした。

このため、私は（最後に、より良く、視覚的に快適な）ソリューションであるFancyboxを使用することを選択しました。残念ながら、デフォルトでは、インスタンスを区別する方法もありません。したがって、ブログ投稿で説明したように、Fancyboxを拡張しました。この質問のトピックではないため、ここにはブログ投稿の全文を含めていません。

ブログ投稿のURL：http: //82517.tumblr.com/post/23798369533/using-fancybox-with-iframe-as-modal-dialog-on-a-web

于 2012-05-26T15:10:09.183 に答える