postMessageとiframeの使用

2818 ワード

クライアントとサーバの値伝達には、いくつかのよくある問題があります.
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