現在のプロジェクトに easyXDM を実装しようとしています。これにより、ユーザーは単一のインターフェースからアクセスして 1 つのワークフローで複数のシステムを操作できるようになります。つまり、ユーザーがページ X を開くと、別のドメインのアプリケーションを iframe にロードして、ユーザーが操作できるようにする必要があります (ユーザーは最初に認証する必要があります)。
タスク自体には、いくつかの条件に応じてアプリケーションの特定の部分を開く必要があるという要件があります (部門 A のユーザーの場合、そのアプリケーションでフォーム Af を開く必要があるとします)。
したがって、ここでコーディングしようとしているロジックは次のとおりです。
- ユーザーがページ X (消費者) を開く
- アプリケーションのログイン ページ (Provider1) を含む iframe が Consumer の iframe に読み込まれる
- ユーザーがアプリケーションにログインする
- Consumer の JS は Provider1 からヘッダーを受け取ります
- Consumer 上の JS は、以前に受信したヘッダーを使用して Provider2 をロードし、Provider2 に特定のフォームに移動するように指示します。
- 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 をロードする方法は?