ポストメッセージの使い方を詳しく解説-htmlチュートリアル-php.cn

ポストメッセージの使い方を詳しく解説

藏色散人

リリース： 2020-02-17 11:13:22

オリジナル

8402 人が閲覧しました

#postmessage の使用法

HTML5 PostMessage の使用法についての概要

全員Web ページ間のデータ転送は、ajax リクエストを使用して実行できることを知っています。今日は、私が学んだ postMessage がページ間のデータリクエストをどのように完了するかを要約します。まず、postMessage は、クロスドメインの問題を解決するための HTML5 の新しいメソッドです。それで、彼はそれをどうやって使うのでしょうか？ここで事例をシェアさせていただきます。

関連ビデオチュートリアルの推奨事項:

html ビデオチュートリアル

以下のコードを見てください:

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 = &#39;red&#39;;
};
</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(&#39;message&#39;, function(ev) {
    // if (ev.source !== window.parent) {return;}
    var data = ev.data;
  document.write("my name is ",data);
   document.body.style.background = &#39;red&#39;;
}, false);
 
function send() {
    var data = document.querySelector(&#39;#inp&#39;).value;
    parent.postMessage(data, &#39;http://localhost:8080/&#39;); // 若父页面的域名和指定的不一致，则postMessage失败
    // parent.postMessage(data, &#39;*&#39;); // 触发父页面的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(&#39;#data&#39;).value;
 
    window.frames[0].postMessage(data, &#39;http://localhost:8080/&#39;); // 触发跨域子页面的messag事件
}
 
window.addEventListener(&#39;message&#39;, function(messageEvent) {
    var data = messageEvent.data; 
    console.info(&#39;message from child:&#39;, data);
    document.write("收到了数据： ",data);
    document.body.style.background = &#39;red&#39;;
}, false);
</script>
</body>
</html>

ログイン後にコピー

同様に、1.html がメインページです。 html を開くと操作できます。

プログラミング関連の学習については、php 中国語 Web サイト

プログラミング入門ビデオチュートリアルチャンネルに注目してください。

以上がポストメッセージの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。