検索
ホームページウェブフロントエンドH5 チュートリアルHTML5 通信 API のクロスドメインしきい値はもう高くなくなり、データ プッシュはもはや夢ではありません_html5 チュートリアル スキル

はじめに

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>

簡単な例:

コードをコピーします
コードは次のとおりです:

投稿情報



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>



上記に基づいて、親ウィンドウに iframe の高さと幅を変更する方法を指示するために、サブページに高さと幅のボタンを追加します。

コードをコピー
コードは次のとおりです。

親レイヤー コード














声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLのH5タグは何ですか?HTMLのH5タグは何ですか?May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1)H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2)CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3)H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード:Web構造に関する初心者向けガイドH5コード:Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造:読みやすさのためのコンテンツの整理H5コード構造:読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1)コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2)FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3)レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン:比較H5対古いHTMLバージョン:比較May 06, 2025 am 12:09 AM

HTML5(H5)以降のバージョンのHTMLの主な違いには、次のものが含まれます。1)H5はセマンティックタグを導入し、2)マルチメディアコンテンツをサポートし、3)オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5:用語と関係を明確にするH5対HTML5:用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1)HTML5は、構造とコンテンツを定義するWebページ標準です。 2)H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

HTML5機能:H5のコアHTML5機能:H5のコアMay 04, 2025 am 12:05 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、フォームエンハンスメント、オフラインストレージ、ローカルストレージが含まれます。 1。コードの読みやすさやSEO効果を改善するなどのセマンティックタグ。 2.マルチメディアサポートは、メディアコンテンツを埋め込むプロセスとタグを簡素化します。 3.フォームエンハンスメント新しい入力タイプと検証プロパティを導入し、フォーム開発を簡素化します。 4.オフラインストレージとローカルストレージは、ApplicationCacheとLocalStorageを通じてWebページのパフォーマンスとユーザーエクスペリエンスを改善します。

H5:HTMLの最新バージョンの探索H5:HTMLの最新バージョンの探索May 03, 2025 am 12:14 AM

html5isamajorrevision ofhtmlstandardthatedatedatizeizeswebdevelovement byintunwingnewsemanticelementsandcapabilities.1)itenhancesscodereadability and.2)html5EnableSricher、InteractiveEnceEnceEnceEncedienceEnceDirectembe、and.2)

基本を超えて:H5コードの高度な手法基本を超えて:H5コードの高度な手法May 02, 2025 am 12:03 AM

H5の高度なヒントには以下が含まれます。1。複雑なグラフィックスを使用して描画します。2。ウェブワーカーを使用してパフォーマンスを向上させます。これらのヒントは、開発者がよりダイナミックでインタラクティブで効率的なWebアプリケーションを構築するのに役立ちます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール