iframes
次のようにネストされたかなり複雑なページを管理する必要があるプラグインを開発しています。
page.html
<body>
<iframe A>
<iframe B>
<div bla></div>
</iframe>
</iframe>
<iframe C>
<div foo></div>
</iframe>
</body>
プラグインは複数のインスタンスで実行されます (メイン ページに 1 つ、iFrame ごとに 1 つ)。インスタンスについてroot
iFrame に通知するために、次のように iFrame を生成するときに、ルート URL をパラメーターとして渡します。
...
newHTML = document.createElement("iframe");
newHTML.setAttribute("src", options.src + "?" + priv.encodeURI(rootPath));
したがって、iFrame は次のような URL で読み込まれます。
http://www.path/to/iFrame.html?base=...encodeURI(window.location.href.of.root)
私の問題は、postMessage
ネストされた iFrame からルートに移動する必要があり、それを機能させることができないことです。これが私がやっていることです:
// sending a message
var adressArray = window.location.href.split("?");
options.src = options.src || adressArray[0];
window.postMessage(options, options.src);
// receiving
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
console.log(event.data);
console.log(event.origin);
console.log(window);
}
私の問題は、呼び出しとリスナーの両方が同じプラグインにありますが、プラグインの異なるインスタンスでリッスンする必要があることです。したがって、postmessage
たとえばのインスタンスによって起動され、インスタンスframe B
のリスナーpage.html
がメッセージを検出する必要があります。
targetOriginプロパティは、postMessage の送信先を指定するためのものだと思いました。代わりに、投稿 iFrame ( B ) の URL を送信することになります。これは、それをリッスンする page.html インスタンスではなく、親 iFrame ( A ) によって記録されます。
質問:
postMessage を 2 つ (または任意の数) の親に渡って送信することはできますか? iFrame Bのインスタンスがpage.htmlのインスタンスに「こんにちは」と言いたいとしpostMessage
ます。すべての iFrame で「ルート インスタンス URL」を使用できる場合、 を使用してこれを行うにはどうすればよいでしょうか?
ありがとう!
質問: