ホームページ > 記事 > ウェブフロントエンド > ポストメッセージの使い方を詳しく解説
#postmessage の使用法
HTML5 PostMessage の使用法についての概要
全員Web ページ間のデータ転送は、ajax リクエストを使用して実行できることを知っています。今日は、私が学んだ postMessage がページ間のデータ リクエストをどのように完了するかを要約します。まず、postMessage は、クロスドメインの問題を解決するための HTML5 の新しいメソッドです。それで、彼はそれをどうやって使うのでしょうか?ここで事例をシェアさせていただきます。 関連ビデオ チュートリアルの推奨事項: 以下のコードを見てください: test.html<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> </body> <script> onmessage=function(e){ e=e||event; document.write("my name is ",e.data); document.body.style.background = 'red'; }; </script> </html>1。 html
<!DOCTYPE html> <html> <head> <title>window.postMessage</title> <meta charset="utf-8"/> <h1>test接收区</h1> </head> <body> </body> <iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe> <script> var f=document.getElementById("f"); //给框架网页发送消息,然后收到之后,会传送过来。 f.οnlοad=function(){ setTimeout(function(){ f.contentWindow.postMessage("谢霆锋","http://localhost:8080"); },3000) } </script> </html>まず原理はこれです。私のケースコードを例として挙げてみましょう。 1.html には iframe Web ページ フレームが埋め込まれており、そこにデータが送信されます。1.html がロードされた後、率先して test.html Nicholas Tse に送信し、テストします。 .html を受信します には、メッセージを受信するための処理関数が含まれており、メッセージを受信すると、すぐに Web ページに文字列を返し、背景を赤色に変更します。これにより、Web ページのインタラクションの効果が得られますが、残念ながら、邪悪な ie6.7 はこれをサポートしておらず、互換性も高くありません。 注: postMessage を記述する場合、postMessage の前に通信するウィンドウ オブジェクト (つまり、通信したい相手) が記述されます。このとき、window.parent の権限は制限されています。同様に、親 DOM 要素を取得すると、ブラウザーがエラーを報告し、クロスドメイン アクセスを実行できないことを通知します。postMessage で受け取ったパラメーターを見てみましょう。最初のパラメーター別のウィンドウに渡したいデータです (文字列型のみ渡すことができます)。2 番目のパラメータは、ターゲット ウィンドウのソースとプロトコル ホストのポート番号を表します。これはセキュリティ上の理由からです。「*」に設定すると、これは、任意のウィンドウに渡すことができることを意味します。 上記は 1 ページのインタラクションであり、次は 2 ページのインタラクションです。実際、これらは同じですが、どちらのページもイベントの送信をリッスンするように作成されています。 test.html
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"/> </head> <body> <h1 class="header">page B</h1> <input type="text" id="inp" value="我想你"> <button οnclick="send()">send</button> </body> <script> window.addEventListener('message', function(ev) { // if (ev.source !== window.parent) {return;} var data = ev.data; document.write("my name is ",data); document.body.style.background = 'red'; }, false); function send() { var data = document.querySelector('#inp').value; parent.postMessage(data, 'http://localhost:8080/'); // 若父页面的域名和指定的不一致,则postMessage失败 // parent.postMessage(data, '*'); // 触发父页面的message事件 } </script> </html>1.html
<!DOCTYPE html> <html> <head> <title>window.postMessage</title> <meta charset="utf-8"/> <h1>test接收区</h1> </head> <body> <h1 class="header">page A</h1> <div class="mb20"> <textarea name="ta" id="data" cols="30" rows="5">hello world</textarea> <button style="font-size:20px;" οnclick="send()">post message</button> </div> <!-- 跨域的情况 --> <iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe> <script> function send() { var data = document.querySelector('#data').value; window.frames[0].postMessage(data, 'http://localhost:8080/'); // 触发跨域子页面的messag事件 } window.addEventListener('message', function(messageEvent) { var data = messageEvent.data; console.info('message from child:', data); document.write("收到了数据: ",data); document.body.style.background = 'red'; }, false); </script> </body> </html>同様に、1.html がメイン ページです。 html を開くと操作できます。 プログラミング関連の学習については、php 中国語 Web サイト
プログラミング入門 ビデオ チュートリアル チャンネルに注目してください。
以上がポストメッセージの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。