JavaScript iframeクロスドメインの詳しい説明

高洛峰
リリース: 2016-12-08 16:18:39
オリジナル
1230 人が閲覧しました

1. ajax がドメインを越えられない問題の原因は何ですか?

ajax 自体は実際には XMLHttpRequest オブジェクトを介してデータを操作しますが、セキュリティ上の理由から、ブラウザーは js コードによるクロスドメイン操作の実行を許可していません。が発行されます。

2. 完璧な解決策はありますか?

いいえ。解決策はたくさんありますが、実際の状況に基づいて選択することしかできません。

具体的な状況は次のとおりです:

1. このドメインとサブドメイン間の相互アクセス: www.aa.com および book.aa.com
2. このドメインと他のドメイン間の相互アクセス: www.aa.comおよび www.bb.com は iframe を使用します
3. このドメインと他のドメイン間の相互アクセス: www.aa.com と www.bb.com XMLHttpRequest を使用してプロキシにアクセスします
4. このドメインと他のドメイン間の相互アクセス: www .aa.com と www.bb.com JS を使用して動的スクリプトを作成する

解決策:

1. データ対話を実現したい場合は、www.aa.com と book.aa.com を開発する必要があります。 。 iframe を使用して www.aa.com のページに book.aa.com を追加し、www.aa.com と iframe の両方に document.domain = "aa.com" を追加すると、ドメインを統合できます。 . 、クロスドメインアクセスを実現できます。同じドメインに iframe を埋め込むのと同じように、内部の JS を直接呼び出すことができます。 (私はこの方法を試していませんが、理論的には可能です)

2. 2 つのドメインが異なる場合、相互に呼び出したい場合は、両方のドメインも自分で開発する必要があります。 iframeを使用すると、相互にデータを転送できます。解決策は、window.location オブジェクトの hash プロパティを使用することです。ハッシュ属性は、http://domian/web/a.htm#dshakjdhsjka の #dshakjdhsjka です。 JS を使用してハッシュ値を変更すると、Web ページは更新されません。JS を介してハッシュ値にアクセスして通信を行うことができます。ただし、IE を除く他のほとんどのブラウザは、ハッシュを変更した限り履歴が記録されるため、前後に進むときに対応する必要があり、非常に面倒です。ただし、単純な処理には引き続き使用できます。以下の特定のコードをダウンロードします。一般的なプロセスは、ページ a とページ b が異なるドメインにあり、iframe を通じて b が a に追加され、a が JS を通じて iframe のハッシュ値を変更し、b でモニターが作成されます (JS はハッシュの変更しかできないため、データが変更された場合、変更できるのは b だけです (b 自身が判断します)。 b のハッシュ値が変更されたことを検出し、変更された値を取得し、処理後に a が必要とする値を返し、次に a のハッシュ値を変更します ( a 自体がクエリ ページの種類である場合は、これに注意する必要があります) たとえば、http://domian/web/a.aspx?id=3 では、データは b のparent.window.location から直接取得できません。また、許可がないことを示すエラーも報告されます。そのため、ハッシュが変更された場合は、返されたデータを取得して、それに応じて処理する必要があります。 。

3. この状況は最も頻繁に発生し、最もよく使用されます。 www.aa.com と www.bb.com のいずれか 1 つだけを変更できます。つまり、もう 1 つは他のユーザーに属しており、データを取得するときに接続パラメーターがどのようなものであるか、最終的にどのような形式で返されるのかがわかります。データは。あなたがしなければならないことは、自分のドメインの下に新しい Web ページを作成し、サーバーに他の人の Web サイトからデータを取得させて、それをあなたに返すことです。 Domain1 の a は、同じドメインの GetData.aspx にデータを要求し、GetData.aspx は、domain2 の ResponseData.aspx に要求を送信し、ResponseData.aspx はデータを GetData.aspx に返し、GetData.aspx はそれを a に返します。 . データリクエスト。 GetData.aspx はプロキシとして機能します。詳細については私のコードを参照してください。

4. この要件と前の要件の違いは、リクエストが

人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート