postMessageとiframeの使用
2818 ワード
クライアントとサーバの値伝達には、いくつかのよくある問題があります.
1.ページとその開いている新しいウィンドウのデータ転送2.マルチウィンドウ間のメッセージング3.ページとネストiframeメッセージング4.上記の3つの問題のドメイン間データ転送
1.postMessage()
これらの問題にはいくつかの解決策があるが、html 5が導入したmessageのAPIは、これらの難題をより便利で、効果的で、安全に解決することができる.postMessage()メソッドでは、異なるソースからのスクリプトが非同期で限られた通信を行うことができ、テキスト・アーカイブ、マルチウィンドウ、ドメイン間メッセージングを実現することができます.
postMessage(data,origin)メソッドは2つのパラメータを受け入れる
1.
2.iframe
2つの基本概念:
ホームフェースとは、ネストされたiframeのページサブページを指します.ネストされたiframeのページを指します.
2.1ホームページで、サブページのDOM要素を操作したい
contentWindowは各ブラウザに互換性があり、サブウィンドウのwindowオブジェクトを取得できます.contentDocument Firefoxサポート、>ie 8のieサポート、サブウィンドウのdocumentオブジェクトを取得できます.
2.2 documentオブジェクトの と :
2.3サブページで、ホーム のDOM を する
window.parentはiframeページでparentを じてホームページのwindowを ることができて、それから に のページの にアクセスすることができます;window.top()ここのtopは のwindowを し、 iframeがネストされている に します.
3. な :
1,
1.ページとその開いている新しいウィンドウのデータ転送2.マルチウィンドウ間のメッセージング3.ページとネストiframeメッセージング4.上記の3つの問題のドメイン間データ転送
1.postMessage()
これらの問題にはいくつかの解決策があるが、html 5が導入したmessageのAPIは、これらの難題をより便利で、効果的で、安全に解決することができる.postMessage()メソッドでは、異なるソースからのスクリプトが非同期で限られた通信を行うことができ、テキスト・アーカイブ、マルチウィンドウ、ドメイン間メッセージングを実現することができます.
postMessage(data,origin)メソッドは2つのパラメータを受け入れる
1.
data
:転送するデータ、html 5仕様では、このパラメータはJavaScriptの任意の基本タイプまたはコピー可能なオブジェクトであってもよいが、すべてのブラウザがこれを行ったわけではなく、一部のブラウザでは文字列パラメータしか処理できないため、パラメータを転送する際にJSONを使用する必要がある.stringify()メソッドはオブジェクトパラメータをシーケンス化し、低バージョンIEでjson 2を参照する.jsは類似の効果を実現することができる.2.origin
:文字列パラメータ、ターゲットウィンドウのソース、プロトコル+ホスト+ポート番号[+URL]を示す.URLは無視されるので、書かなくてもいい.このパラメータは安全のため、postMessage()メソッドは指定ウィンドウにメッセージのみを渡す.もちろん、構築パラメータを「*」に設定すれば、任意のウィンドウに渡すことができる.現在のウィンドウと同じソースを指定する場合は「/」に設定します.2.iframe
2つの基本概念:
ホームフェースとは、ネストされたiframeのページサブページを指します.ネストされたiframeのページを指します.
2.1ホームページで、サブページのDOM要素を操作したい
contentWindowは各ブラウザに互換性があり、サブウィンドウのwindowオブジェクトを取得できます.contentDocument Firefoxサポート、>ie 8のieサポート、サブウィンドウのdocumentオブジェクトを取得できます.
var ifr = document.getElementById("iframe"); // iframe , window window
ifr.contentWindow.document.getElementById("div1") // iframe window , ifr.contentWindow iframe window , document
2.2 documentオブジェクトの と :
var getIFrameDoc = function(){
var ifr = document.createElement("iframe");
document.getElementsByTagName("body")[0].appendChild(ifr);
return ifr.contentDocument || ifr.contentWindow.document;
}
2.3サブページで、ホーム のDOM を する
window.parentはiframeページでparentを じてホームページのwindowを ることができて、それから に のページの にアクセスすることができます;window.top()ここのtopは のwindowを し、 iframeがネストされている に します.
var ifr = document.getElementByTagName("iframe");
ifr.parent.document.getElementById("div1")
3. な :
1,
document.getElementById("myiframe").contentWindow
iframeオブジェクトを すると、contentWindowでiframeがページを むwindowオブジェクトを し、ページ に にアクセスできます.2,$("#myiframe")[0].contentWindow
jqueryセレクタiframeを し、まずjqueryオブジェクトをDOMオブジェクトに するか、get()メソッドを して する.3,$("#myiframe")[0].contentWindow.$("#div1").val()
iframeのwindowオブジェクトを した 、jqueryセレクタを してページ を うことができる.4,$("#myiframe")[0].contentWindow.username="starry";
は、iframeページwindowにおいてiframeページにパラメータを すことができる.usernameは を できます.usernameはカスタムグローバル です.5,iframeページでparentを じてホームページのwindowを ることができて、それから に のページの にアクセスすることができます;6,parent.$("#frameA")[0].contentWindow.document.getElmentById("#frameB");
iframeページ で び すには、まず のwindowを し、それから のiframeを び してwindowを して する がある.