ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 通信 API のクロスドメインしきい値はもう高くなくなり、データ プッシュはもはや夢ではありません_html5 チュートリアル スキル
HTML5 通信 API のクロスドメインしきい値はもう高くなくなり、データ プッシュはもはや夢ではありません_html5 チュートリアル スキル
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2016-05-16 15:49:401910ブラウズ
はじめに
投稿情報
title><br> <script src="../jquery-1.7.1.js" type="text/javascript"></script><br> <script type="text/ javascript"></script> $(document).ready(function () {<br> window.addEventListener('message', function (ev) {<br> //メッセージのソースを確認する必要があります<br> $('#msg_box' ).html(ev.origin '送信メッセージ:' ev.data);<br> }, false);<br> <br> $('#send').click(function () {<br> var Frame = window.frames[0];<br> Frame.postMessage($('#msg').val(), 'http://localhost:3317/html5 および css3/06 通信 API/ 02.htm') ;<br> });<br> });<br> <br> <br> <br>
親レイヤー コード
HTML5 は、コミュニケーション、クロスドキュメントメッセージ送信、および WEB ソケット API に関連する 2 つの新しい API を追加します。
クロスドキュメントメッセージ送信機能は、異なる Web ドキュメントおよび異なるポート (クロスドメインの状況) でメッセージを送信できます。
Web ソケット API を使用すると、クライアントとサーバーがソケット ポートを介してデータを転送できるため、データ プッシュ テクノロジを使用できます。
ドキュメント間メッセージング以前は、ドメインを越えて情報を取得したい場合、多大な労力が必要でした。今では、Web ページが配置されているウィンドウ オブジェクトのインスタンスを取得すれば、相互に通信できるようになりました。
まず、他のウィンドウからメッセージを受信したい場合は、そのウィンドウ オブジェクトを監視する必要があります。
window.addevntListener(<span style="COLOR: #800000">'</span><span style="COLOR: #800000">message</span><span style="COLOR: #800000">'</span>, function () {}, <span style="COLOR: #0000ff">false</span>)
Windows オブジェクトの postMessage メソッドを使用して、他のウィンドウにメッセージを送信します。
<span style="COLOR: #000000">otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本，也可以是js对象（json）第二个参数为接收消息对象窗口的URL，可以使用通配符</span>
簡単な例:
コードをコピーします
コードは次のとおりです:投稿情報
上記に基づいて、親ウィンドウに iframe の高さと幅を変更する方法を指示するために、サブページに高さと幅のボタンを追加します。
コードをコピー
コードは次のとおりです。親レイヤー コード
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。