ホームページ ウェブフロントエンド jsチュートリアル postMessage() を使用して、クロスドメイン iframe ページ間の情報転送メソッドを実装する_javascript スキル

postMessage() を使用して、クロスドメイン iframe ページ間の情報転送メソッドを実装する_javascript スキル

May 16, 2016 pm 03:07 PM
iframe クロスドメイン

Web オリジン ポリシーの制限により、ページでクロスドメイン iframe リンクが使用されている場合、メイン ページとサブページは相互作用できず、ページ間の情報の転送に多くの問題が発生します。一連の試みの結果、最終的にそれを達成する次の方法を見つけました:

1. サブページ URL のパラメータを渡します

簡単に言うと、メイン ページと同じオリジンを持つ URL に渡す必要があるすべてのパラメータを追加し、サブページをその URL にリダイレクトします。その後、メイン ページは src を通じてこれらのパラメータを取得します。 iframe

プロセスは非常に複雑なので、この方法はお勧めできません

2. postMessage()

postMessage() は、HTML5 が提供するイベントベースのメッセージ送信 API であり、クロステキストドキュメント、マルチウィンドウ、クロスドメインメッセージングを実現できます。

postMessage(data,origin) メソッドは 2 つのパラメータを受け入れます

1.data: 渡されるデータ。HTML5 仕様では、このパラメータは JavaScript の任意の基本型またはコピー可能なオブジェクトにできると記載されていますが、一部のブラウザではこれができるわけではありません。パラメータを渡すときに、JSON.stringify() メソッドを使用してオブジェクト パラメータをシリアル化する必要があります。同様の効果は、IE の以前のバージョンで json2.js を参照することによって実現できます。

2.origin: ターゲット ウィンドウのソースを示す文字列パラメータ、プロトコル + ホスト + ポート番号 [+URL]。URL は無視されるため、このパラメータを記述する必要はありません。 postMessage() メソッドのみ メッセージは指定されたウィンドウに渡されます。もちろん、必要に応じてパラメータを「*」に設定することもできます。現在のウィンドウを原点とする場合は、「/」に設定します。

メッセージを送信 (サブページ)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

function sendMessage(param) {

  var url;

  if (param.url) {

    url = param.url;

  };

  var dataJson = JSON.stringify({

     type:1,  

    a: param.c,

    b: param.c,

    c: param.c,

    url: url

  });

  window.parent.postMessage(dataJson, '*');

}

ログイン後にコピー

一部のブラウザは文字列パラメータのみを処理できるため、最初に JSON.stringfy() を使用してパラメータを文字列に変換し、次に受信ページで JSON.parse() を使用してパラメータを変換する必要があります。オブジェクトに戻ります。

メッセージを受信

サブページによって渡されるパラメーターについては、ウィンドウのメッセージ イベントをリッスンすることで取得できます。

window.addEventListener('message', function(e) {
var data = JSON.parse(e.data);
switch (data.type) {
ケース 1:
アラート(data.a);ブレーク;
}
}, false);

メッセージ イベントにはいくつかの重要な属性があります

1.data: 名前が示すように、
で渡されるメッセージです。 2.source: メッセージを送信するウィンドウオブジェクト
3.origin: メッセージウィンドウのソース (プロトコル + ホスト + ポート番号)
クロスドメインのメッセージ配信は、postMessage() メソッドとメッセージ イベントを通じて実現できます。デモでは、子ページを通じてメッセージを親ページに配信するため、送信とウィンドウへのウィンドウを使用します。受信:

window.parent.postMessage(dataJson, '*'); ホームページからサブページへの場合は、送信に window.frames[0] を使用する必要があります。

上記の記事は、クロスドメイン iframe ページ間の情報転送を実現するために postMessage() を使用しています。これは、エディターが共有したすべての内容です。参考にしていただければ幸いです。スクリプト ホームをサポートしていただければ幸いです。

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

ホット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衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML で IFrame をトリミングするにはどうすればよいですか? HTML で IFrame をトリミングするにはどうすればよいですか? Aug 29, 2023 pm 04:33 PM

インラインフレームはHTMLではiframeと呼ばれます。ラベルは、ブラウザがスクロール バーや枠線を使用してさまざまなドキュメントを表示できる、コンテンツ内の長方形の領域を指定します。現在の HTML ドキュメント内に別のドキュメントを埋め込むには、インライン フレームを使用します。要素への参照は、HTMLiframe name 属性を使用して指定できます。 JavaScript では、要素への参照も name 属性を使用して行われます。 iframe は基本的に、現在表示されている Web ページ内に Web ページを表示するために使用されます。 iframe を含むドキュメントの URL は、「src」属性を使用して指定されます。構文 以下は HTML <iframesrc="URL"title="d の構文です。

iframe の data-id は何を意味しますか? iframe の data-id は何を意味しますか? Aug 28, 2023 pm 02:25 PM

iframe の data-id は、特定の要素の識別子を格納するために HTML タグで使用されるカスタム属性を指します。 data-id 属性を使用すると、iframe 要素に一意の識別子を追加して、JavaScript で操作およびアクセスできるようにすることができます。 data-id 属性の命名は、特定のニーズに応じてカスタマイズできますが、一意性と読みやすさを確保するために、通常はいくつかの命名規則に従います。 data-id 属性を使用して、特定の iframe を識別および操作することもできます。

PHP セッションのクロスドメイン問題の解決策 PHP セッションのクロスドメイン問題の解決策 Oct 12, 2023 pm 03:00 PM

PHPSession のクロスドメイン問題の解決策 フロントエンドとバックエンドの分離の開発では、クロスドメイン要求が標準になっています。クロスドメインの問題に対処するときは、通常、セッションの使用と管理が必要になります。ただし、ブラウザーのオリジンポリシーの制限により、デフォルトではセッションをドメイン間で共有できません。この問題を解決するには、いくつかの技術と方法を使用して、セッションのクロスドメイン共有を実現する必要があります。 1. ドメイン間でセッションを共有するための Cookie の最も一般的な使用法

iframeの読み込みイベントとは何ですか? iframeの読み込みイベントとは何ですか? Aug 28, 2023 pm 01:55 PM

iframe の読み込みイベントには、onload イベント、onreadystatechange イベント、onbeforeunload イベント、onerror イベント、onabort イベントなどが含まれます。詳細説明: 1. onload イベント、iframe のロード後に実行される JavaScript コードを指定、2. onreadystatechange イベント、iframe の状態が変化したときに実行される JavaScript コードを指定、など。

iframe の危険性とは iframe の危険性とは Sep 08, 2023 pm 03:14 PM

iframe の危険性は主に次のとおりです: 1. セキュリティの脆弱性: 悪意のある Web ページが iframe 経由で他の Web ページをロードし、攻撃を実行する可能性がある; 2. 同一オリジン ポリシーの突破: iframe で他のドメイン名で Web ページをロードすることにより、同じ -オリジンポリシーが侵害される可能性があるクロスドメイン通信を実現するための戦略(悪意のある攻撃を受ける可能性がある)、3. コード実行の問題、iframe にロードされた Web ページで JS コードが実行される可能性があり、セキュリティ上の問題が発生する可能性がある、4. SEO の問題、検索エンジンiframe などを介して読み込まれたコンテンツを正しく解析してインデックスを作成できない場合があります。

Python での iframe とは何ですか? Python での iframe とは何ですか? Aug 25, 2023 pm 03:24 PM

Python の iframe は、Web ページに別の Web ページまたはドキュメントを埋め込むために使用される HTML タグです。 Python では、さまざまなライブラリとフレームワークを使用して iframe を処理および操作できます。その中で最も一般的に使用されるのは BeautifulSoup ライブラリで、Web ページから iframe のコンテンツを簡単に抽出して操作および処理できます。 iframe の処理方法を知ることは、Web 開発とデータ スクレイピングの両方に非常に役立ちます。

iframe のスクロール動作を監視する iframe のスクロール動作を監視する Feb 18, 2024 pm 08:40 PM

iframe のスクロールを監視する方法には、特定のコード サンプルが必要です。iframe タグを使用して Web ページに他の Web ページを埋め込む場合、場合によっては、iframe 内のコンテンツに対して特定の操作を実行する必要があります。一般的なニーズの 1 つは、スクロールが発生したときに対応するコードを実行できるように、iframe のスクロール イベントをリッスンすることです。以下では、JavaScript を使用して iframe のスクロールを監視する方法を紹介し、参考として具体的なコード例を示します。 iframe 要素を取得する まず、必要なものがあります。

iframe 埋め込みプレーヤーとは何ですか? iframe 埋め込みプレーヤーとは何ですか? Aug 25, 2023 pm 02:13 PM

iframe 埋め込みプレーヤーは、Web ページにビデオプレーヤーを埋め込む技術です。埋め込みプレーヤーの利点は次のとおりです: 1. iframe タグを使用することで、柔軟性があり、さまざまなソースからのビデオ メディアを同じ Web ページに埋め込むことができます; 2. 使いやすさ、埋め込みコードをコピーして貼り付けるだけで再生できます。 Webページに追加; 3. パラメータの設定によりプレーヤーの外観や動作を制御可能; 4. JavaScriptなどを使用してプレーヤーの動作を制御可能

See all articles