1

現在のプロジェクトに easyXDM を実装しようとしています。これにより、ユーザーは単一のインターフェースからアクセスして 1 つのワークフローで複数のシステムを操作できるようになります。つまり、ユーザーがページ X を開くと、別のドメインのアプリケーションを iframe にロードして、ユーザーが操作できるようにする必要があります (ユーザーは最初に認証する必要があります)。

タスク自体には、いくつかの条件に応じてアプリケーションの特定の部分を開く必要があるという要件があります (部門 A のユーザーの場合、そのアプリケーションでフォーム Af を開く必要があるとします)。

したがって、ここでコーディングしようとしているロジックは次のとおりです。

  1. ユーザーがページ X (消費者) を開く
  2. アプリケーションのログイン ページ (Provider1) を含む iframe が Consumer の iframe に読み込まれる
  3. ユーザーがアプリケーションにログインする
  4. Consumer の JS は Provider1 からヘッダーを受け取ります
  5. Consumer 上の JS は、以前に受信したヘッダーを使用して Provider2 をロードし、Provider2 に特定のフォームに移動するように指示します。
  6. Provider2 内の JS は Consumer からメッセージを受け取り、このアプリケーション内の特定のフォームに移動します。

ここに私が今得たものがあります(easyXDMのreadmeからのかなり単純な例です):

プロバイダー

    var socket = new easyXDM.Socket({
        onMessage: function(message, origin){
            // do something
        }
    });

消費者

var socket = new easyXDM.Socket({
    remote: "http://remote/page",
    container: "test",
    onMessage: function(message, origin){
        alert("Received '" + message + "' from '" + origin + "'");
        var socket1 = new easyXDM.Socket({
            remote: "http://remote/page2",
            container: "test",
            headers: providers2_headers,
            onMessage: function(message, origin){
                alert("Received '" + message + "' from '" + origin + "'");            
            },
            onReady: function() {
                this.container.getElementsByTagName("iframe")[0].style.width = "100%";
                socket1.postMessage("Yay, it works!");
            }
        });
    },
    onReady: function() {
    this.container.getElementsByTagName("iframe")[0].style.width = "100%";
        socket.postMessage("Yay, it works!");
    }
});

質問

Provider1 からヘッダーを取得し、それらを使用して Provider2 をロードする方法は?

4

0 に答える 0