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

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. この要件と前の要件の違いは、リクエストが 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用して行われることです。この要件では、両方のドメインが開発されている必要もあります。原理は JS ファイルインジェクションです。JS タグはこのドメインの a で生成され、その SRC は別の要求されたドメインのページ b を指し、b はデータを返すことができ、JS コードを直接返すことができます。スクリプトの src 属性はクロスドメインにできるためです。コードを具体的に見てみると、これは比較的単純です。

親ウィンドウの iframe の要素を取得します

格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例：window.frames["ifm"].document.getElementById("btnOk").click();

形式:

var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例：
var obj=document.getElementById("ifm").contentWindow;
var ifmObj=obj.document.getElementById("btnOk");
ifmObj.click();

iframe の親ウィンドウの要素を取得します

格式：window.parent.document.getElementById("父窗口的元素ID").click();
实例：window.parent.document.getElementById("btnOk").click();

jque ry

入ってiframe の親ウィンドウの要素

格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

iframe の親ウィンドウの要素を取得します

格式：$('#父窗口中的元素ID', parent.document).click();
实例：$('#btnOk', parent.document).click();