ホームページ >ウェブフロントエンド >htmlチュートリアル >postMessage はクロスドメインおよびクロスウィンドウのメッセージングを解決します_html/css_WEB-ITnose
postMessage はクロスドメインおよびクロスウィンドウのメッセージングを解決します_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:53:221448ブラウズ
Web 開発を行う場合、クライアントとサーバー間の値の転送に加えて、メッセージ パッシングに関して、よく遭遇するいくつかの問題があります。 1. ページとそのページで開く新しいウィンドウのデータ転送2. 複数ウィンドウ間 メッセージ間転送 3. ページおよびネストされた iframe メッセージ転送 4. 上記 3 つの問題のクロスドメイン データ転送 これらの問題にはいくつかの解決策がありますが、html5 で導入されたメッセージ API を使用すると、より便利にこれらの問題を解決できます。効果的かつ安全に。 postMessage() メソッドを使用すると、さまざまなソースからのスクリプトが制限された方法で非同期通信できるようになり、クロステキスト ファイル、マルチウィンドウ、およびクロスドメイン メッセージングを実現できます。
postMessage(data,origin) メソッドは 2 つのパラメーターを受け入れます。
1.data: 渡されるデータ。html5 仕様では、このパラメーターは任意の基本タイプの JavaScript またはコピー可能なオブジェクトにできると記載されています。ただし、すべてのブラウザでこれができるわけではありません。一部のブラウザでは文字列パラメータのみを処理できるため、IE の以前のバージョンでは、パラメータを渡すときに JSON.stringify() メソッドを使用してオブジェクト パラメータをシリアル化する必要があります。 json2.js。
2.origin: 対象ウィンドウのソースを示す文字列パラメータ、プロトコル + ホスト + ポート番号 [+URL]、URL は無視されるため、このパラメータは記述する必要はありません。セキュリティ上の理由から、postMessage( ) メソッドは指定されたウィンドウにのみメッセージを渡します。もちろん、必要に応じて、パラメーターを「*」に設定して、任意のウィンドウに渡すことができます。現在のウィンドウと同じ原点の場合は、「/」に設定します。
親ページ
<!DOCTYPE html><html><head> <title>Post Message</title></head><body> <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> <div id="color">Frame Color</div> </div> <div> <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe> </div> <script type="text/javascript"> window.onload=function(){ window.frames[0].postMessage('getcolor','http://lslib.com'); } window.addEventListener('message',function(e){ var color=e.data; document.getElementById('color').style.backgroundColor=color; },false); </script></body></html> iframe ページ
<!doctype html><html> <head> <style type="text/css"> html,body{ height:100%; margin:0px; } </style> </head> <body style="height:100%;"> <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);"> click to change color </div> <script type="text/javascript"> var container=document.getElementById('container'); window.addEventListener('message',function(e){ if(e.source!=window.parent) return; var color=container.style.backgroundColor; window.parent.postMessage(color,'*'); },false); function changeColor () { var color=container.style.backgroundColor; if(color=='rgb(204, 102, 0)'){ color='rgb(204, 204, 0)'; }else{ color='rgb(204,102,0)'; } container.style.backgroundColor=color; window.parent.postMessage(color,'*'); } </script> </body></html>