通常、Web開発を行う場合、クライアントとサーバーの伝達に加えて、しばしば遭遇するいくつかの問題があります。
1。ページのデータ送信と新しいウィンドウが開かれました
2。複数のウィンドウ間のメッセージ
3。ページとネストされたiframeメッセージの送信
4。上記の3つの問題のクロスドメインデータ送信
postmessage（）これらの問題にはいくつかの解決策がありますが、HTML5によって導入されたメッセージAPIは、より便利で効果的で、安全に解決することができます。 PostMessage（）メソッドは、異なるソースからのスクリプトを使用して、Cross -Textファイル、マルチウィンドウ、およびクロスドメインメッセージを実現できる限られた通信に非同期メソッドを使用できます。
Message（データ、Origin）メソッドは2つのパラメーターを受け入れます
1.データ：渡すデータは、パラメーターがJavaScriptの基本的なタイプまたは複製可能なオブジェクトであると述べましたが、すべてのブラウザがこれを実行できるわけではないので、 json.stringify（）メソッドを使用して、パラメーターを参照するときにオブジェクトパラメーターをシリアル化する必要があります。 2. Origin： Stringパラメーター、ターゲットウィンドウのソース、プロトコル+ポート番号[+URL]は無視されますもちろん、指定されたウィンドウにメッセージを渡すことができます。に/。http://test.com/index.html
<div style = width：200px; src = http://lslib.com/lslib.html> </iframe> </div>
http://test.com/index.htmlの場合、Cross -domain iframeページhttp：//lslib.html on the Cross -Domainにメッセージを渡すことができます。
window.onload = function（）{window.frames [0] .postmessage（ 'getcolor'、 'http://lslib.com'）;}メッセージを受信します上記のTest.comのページは、lslib.comにメッセージを送信したため、lslib.comページでメッセージを受信し、ウィンドウのメッセージイベントのメッセージイベントを監視する方法を監視します。
http://lslib.com/lslib.html
window.addeventlistener（ 'message'、function（e）{if（e.source！= window.parent）return; var color = container.style.backgroundcolor;window.parent。postmessage（color、 '*'）;}、間違い;このようにして、任意のウィンドウで渡されたメッセージを受信することができます。
いくつかの重要な属性があります
1。データ：名前が示すように、それは渡されるメッセージです2.ソース：メッセージを送信するウィンドウオブジェクト3.ORIGIN：メッセージウィンドウの送信ソース（プロトコル+ホスト+ポート番号）このようにして、Cross -Domainメッセージを受信することもできます
シンプルなデモこの例では、左側のdivは右側の右側のdivの色の変化に応じて変化します
<！ <div id = color> frame color </div> </div> <div> <iframe id = child src = http://lslib.com/lslib.html> </div> </div> <script = text/javascript> window.onload = function（）{window.frames [0] .postmessage（ 'getColor'、 'http://lslib.com'）;} window.addd eventlistener（ 'message'、function（e） {var color = data.getElementbyid（ 'color'）、color;} <！ = conterer onclick = changecolor = widht：100％; ）window.addeventlistener（ 'message'、function（e）{if（e.source！= window.p.p arent） ;}、false） ';} else {color =' rgb（204,102,0） ';} container.style.backgroundcolor = color;} </body> </html> http://lslib.com/lslib .htmlこの例にページがロードされると、ホームページはiframeに「getColor」リクエストを送信します（パラメーターは実用的ではありません）
window.onload = function（）{window.frames [0] .postmessage（ 'getcolor'、 'http://lslib.com'）;}iframeがメッセージを受け取り、現在の色をメインページに送信します
window.addeventlistener（ 'message'、function（e）{if（e.source！= window.parent）return; var color = container.style.backgroundcolor;window.parent。postmessage（color、 '*'）;}、間違い;ホームページでメッセージを受信し、独自のdiv色を変更します
window.addeventlistener（ 'message'、function（e）{var color = e.data; document.getElementById（ 'color'）。style.backgroundcolor = color;）;iframeをクリックすると、その色変更方法がトリガーされている場合は、最新の色をメインページに送信します
function changecolor（）{var color = container.backgroundcolor; RGB（204,102,0） ';} container.Style.BackGroundColor = Parent.Postmessage（color、'*'）;}ホームページは、メッセージイベントを聞いて独自の変色を処理するプログラムをまだ使用しています
window.addeventlistener（ 'message'、function（e）{var color = e.data; document.getElementById（ 'color'）。style.backgroundcolor = color;）;やっと単純な使用は、Facebookがすでにそれを使用していると言われています。 SO -CALLEDブラウザの互換性は、IEが開始した問題になっています。エッセンスエッセンスただし、良いニュースはLocalStorageのようなものですが、一部のブラウザー（Firefox4.0など）の低いバージョンはwindow.onmessage = function（）{}を互換性のあるIEにサポートしていません。 AddEventListenerをサポートするかどうかを決定します。
上記は、この記事のすべての内容です。