#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 id="test接收区">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 id="page-nbsp-B">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 id="test接收区">test接收区</h1>
</head>
<body>
<h1 id="page-nbsp-A">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 サイトの他の関連記事を参照してください。
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
