次の表は、http://store.company.com/dir/page.htmlに対する相同検出の結果を示しています。
クロスドメインの問題を解決するために、次の方法を使用できます。
1。JSONPを介したクロスドメイン
JSでは、xmlhttprequestを使用して異なるドメインのデータを直接リクエストすることはできません。ただし、ページ上のさまざまなドメインにJSスクリプトファイルを導入することは問題ありません。JSONPはこの機能を使用してそれを実現します。
たとえば、A.HTMLページがあり、そのコードはAJAXを使用して、JSONデータアドレスがhttp://example.com/data.php、次にコードであると仮定してJSONデータを取得する必要があります。 a.htmlでそれだけです:
データ収集のアドレスの後、このパラメーター名が使用されていることがありますが、他のパラメーター名が使用されています。もちろん、データを取得するためのJSONPアドレスページがお客様によって制御されていない場合、データを提供する当事者の指定された形式に従って動作する必要があります。
JSファイルとして導入されているため、http://example.com/data.phpの返品は実行可能なJSファイルである必要があるため、このページのPHPコードは次のようになります。
そのページ出力の最終結果は次のとおりです。
したがって、http://example.com/data.php?callback=dosomhingを介して取得したJSファイルは、以前に定義したdosomhine関数であり、そのパラメーターは必要なJSONデータであるため、データが必要です。
このように、JSSONPの原理は、JSファイルが正常にロードされた後、非常に明確です。パラメーターとして渡されました。したがって、JSONPは、それに応じて協力するためにサーバー側のページを必要とします。
JSONPのクロスドメインの原則を知った後、JSを使用して、意図的にスクリプトタグを手動で書き込むことなく、クロスドメイン操作のスクリプトタグを動的に生成できます。ページがjQueryを使用している場合、カプセル化方法を使用してJSONP操作を非常に便利に実行できます。
原則は同じですが、スクリプトタグを手動で挿入して関数を定義する必要はありません。 jQueryは、コールバック=?の疑問符を自動的に生成し、実際にデータを取得した後に自動的に破壊します。 $ .GetJSONメソッドは、クロスドメインでない場合、通常のAJAXメソッドを呼び出します。 JSファイルの読み込み。
2。ドキュメントを変更してサブドメインを交差させます。Domain
ブラウザには相同ポリシーがあり、その制限の1つは、最初の方法では、さまざまなソースからのドキュメントをAJAXメソッドで要求できないと述べたことです。 2番目の制限は、ブラウザ内の異なるドメインのフレームワーク間でJS相互作用を実行できないことです。注意すべきことの1つは、異なるフレームワーク(父と息子またはピア生成)が互いのウィンドウオブジェクトを取得できることですが、痛みは、取得したウィンドウオブジェクトのプロパティと方法を使用できないことです(HTML5のメッサージポストメソッドは例外です。 IE6などの一部のブラウザは、TOPや親などのいくつかの属性を使用できます。たとえば、アドレスがhttp://www.example.com/a.htmlであるページがあり、そのページはhttp://example.com/b.htmlです。このページには、内部のIFRAMEフレームワークとは異なるドメインがあるため、ページにJSコードを記述してもIFRAMEで物事を取得することはできません。
この時点で、Document.domainはdocument.domainを使用する必要があります。同じドメイン名に設定します。ただし、document.domainの設定は、Document.domainが独自の親ドメインにのみ設定でき、メインドメインは同じでなければなりません。たとえば、abexample.comのドキュメントのドキュメントのDomainは、abexample.com、b.example.com、およびexample.comのいずれかに設定できますが、Cabexample.comに設定することはできません。現在のドメインドメインのうち、メインドメインが同じではないため、Baidu.comに設定することはできません。
ページのdocument.domainを設定http://www.example.com/a.html:
Document.Domainは、ページhttp://example.com/b.htmlにも設定されています。これは、このドキュメントのドメインもexample.comです。
このようにして、JSを介してiframe内のさまざまなプロパティとオブジェクトにアクセスできます。
ただし、http://example.com/b.htmlページをhttp://www.example.com/a.htmlページで直接リクエストする場合は、同じdocument.domainを設定しても、それでも機能しないため、ドキュメントを変更する方法は、異なるサブドメインのフレームワーク間の相互作用にのみ適しています。 JSONPメソッドを使用することに加えて、Ajaxメソッドを介して異なるサブドメインのページと対話する場合は、非表示のiframeを使用してプロキシとして機能することもできます。原則は、このiframeがajaxを介してデータを取得するターゲットページと同じドメインを持つページをロードすることです。したがって、このiframeのページはAjaxを使用して通常のデータを取得し、次に私たちを通して私が言及したばかりですdocument.domainを変更する方法により、JSを介してこのiframeを完全に制御できるため、iframeにAjaxリクエストを送信できるようになり、受信したデータも取得できます。
3. window.nameを使用してドメインをクロスします
ウィンドウオブジェクトには、機能があります。つまり、ウィンドウのライフサイクル中に、ウィンドウによってロードされたすべてのページがwindow.nameを共有し、各ページにはwindow.nameのnameがありますWindow.Nameは、Windowでロードされたすべてのページで持続します。新しいページのロードのためにリセットされません。
たとえば、次のコードを含むページa.htmlがあります。
b.htmlページのコードを見てみましょう。
A.HTMLページがロードされてから3秒後、B.HTMLページにジャンプし、結果は次のとおりです。
前のページA.htmlからwindow.nameまでに設定された値は、b.htmlページで正常に取得されたことがわかります。ロードされたすべてのページにwindow.nameが変更されていない場合、その後、これらすべてのページで取得されたwindow.nameの値は、a.htmlページで設定された値です。もちろん、必要に応じて、window.nameの値を変更できます。 window.nameの値は、この文字列の最大サイズの形式であることができることに注意してください。
上記の例では、使用したページA.HTMLとB.HTMLは同じドメインにありますが、A.HTMLとB.HTMLが異なるドメインにある場合でも、上記の結論も適用されます。これはまったく同じです。 window.nameを使用したクロスドメインの原理。
window.nameを介してドメイン全体でデータを取得する方法を見てみましょう。例を挙げましょう。
たとえば、www.example.com/a.htmlページがあります。A.htmlページでJSを使用して、別のドメインwww.cnblogs.com/data.htmlにある別のページでデータを取得する必要があります。 。
data.htmlページのコードは非常に簡単です。これは、A.HTMLページが現在のwindow.nameで取得したいデータ値を設定するためです。 data.htmlのコード:
A.HTMLページで、data.htmlページをどのようにロードしますか?明らかに、a.htmlページでwindow.locationを変更してdata.htmlページを直接読み込むことはできません。A.htmlページがジャンプしない場合でも、data.htmlでデータを取得する必要があるためです。答えは、A.HTMLページの非表示のIFRAMEを使用して仲介者として機能し、IFRAMEはdata.htmlのデータを取得し、A.HTMLがIFRAMEによって取得されたデータを取得することです。
仲介者として行動するiframeがdata.htmlのwindow.nameを介してデータセットを取得したい場合、このiframeのSRCをwww.cnblogs.com/data.htmlに設定する必要があります。 A.HTMLは、IFRAMEによって取得されたデータを取得する必要があります。つまり、iframeのwindow.nameの値を取得するには、このiframeのSRCをA.HTMLページと同じドメインに設定する必要があります。以前の同じオリジン戦略で、A.HTMLはiframeのwindow.nameプロパティにアクセスできません。これは、クロスドメインプロセス全体です。
a.htmlページのコードを見てください:
上記のコードは、JSを使用して上記のプロセスをカプセル化することができます。など、さまざまなイベントを動的に登録するなど、セキュリティのために、データを取得した後、プロキシ。また、インターネットには多くの既製のコードがあります。
window.nameを通るクロスドメイン、それだけです。
4.新しく導入されたwindow.postmessageメソッドをHTML5に使用して、ドメイン全体でデータを転送する
window.postmessage(メッセージ、ターゲットリギン)メソッドは、HTML5の新しく導入された機能です。 、オペラなど。すべてのマシンはすでにwindow.postmessageメソッドをサポートしています。
ポストメッサージメソッドを呼び出すウィンドウオブジェクトは、メソッドの最初のパラメーターが送信されるメッセージであり、型は2番目のパラメーターターゲットリジンのみを使用できます受信したメッセージ。
メッセージを受信する必要があるウィンドウオブジェクトは、独自のメッセージイベントを聞くことで取得でき、メッセージコンテンツはイベントオブジェクトのデータ属性に保存されます。
上記の他のウィンドウオブジェクトへの送信メッセージは、実際には、各フレームにウィンドウオブジェクトがあるため、ページに複数のフレームがある状況を指します。 2番目の方法について議論するとき、他のパーティのウィンドウオブジェクトは、異なるドメインのフレームワーク間で取得できると述べ、window.postmessageメソッドも使用できると述べました。 2ページの簡単な例です
ページを実行した後に得られる結果:
そのページBがメッセージを正常に受け取ったのを見ました。
ポストメサージを使用してドメイン間でデータを送信するのは非常に直感的で便利ですが、不利な点は、IE6とIE7がそれをサポートしていないことです。したがって、それを使用するかどうかは実際のニーズに依存します。