この記事では、クロスドメイン通信の問題を解決するための html5 postMessage の詳細な説明を紹介し、皆さんと共有します。詳細は次のとおりです。
レンダリング
postmessage の解析 HTML5 は、安全なクロスオリジン通信を実現するための新しいメカニズム PostMessage を提供します。
otherWindow: IFRAME の contentWindow プロパティ、実行、window.open によって返されるウィンドウ オブジェクトなど、他のウィンドウへの参照 message: 他のウィンドウに送信されるデータ targetOrigin: ウィンドウのorigin プロパティを使用して、どのウィンドウが送信できるかを指定します。メッセージ イベントを受信します。その値は文字 * (無制限を示す) または URL です。 transfer: メッセージと同時に渡される Transferable オブジェクトの文字列です。これらのオブジェクトの所有権はメッセージの受信者に転送されます。一度送信されると、所有権は保持されなくなります。デフォルト値は false で、バブル配信を意味します。 値が true の場合、その値はキャプチャされて渡されます。実施方法
メインインターフェイス main.html
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>クロスドメイン データ アクセス</title> <script type=text/javascript> window.addEventListener('message',function(e){ console.log(e--->,e); const data = e.data; document.getElementById('main1').style.backgroundColor=e.data; },false) </script></head><body> <div id=main1 style=width:200px;height:200px;margin:100px;border:solid 1px #000;> 私はメインインターフェイスであり、iframe の配信の受信を待っています</div> <div style=margin:100px;> iframe < iframe src= http://localhost:3000/iframe.html width=800px height=300px ></iframe> </div></body></html>iframeインターフェース
<!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換コンテンツ=ie=edge> <title>ドキュメント</title> <style type=text/css> html,body{ height:100%; } </style></head> <body style=height:100%;> <div id=frame style=height:200px; width:200px;background-color:rgb(204, 204, 0) onclick=changeColor( )> クリックして色を変更します</div> <script type=text/javascript> function changeColor(){ var Frame = document.getElementById('frame'); var color=frame.style.backgroundColor; if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)' }else{ color='rgb(204,102,0); )'; } console.log(frame====>,frame); フレーム.style.backgroundColor=color; window.parent.postMessage(color,'*') } </script> </body></html>以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。