ここでJSクロスドメインデータ送信手段、又はそのようなJSによって異なるドメイン（インラインフレーム）内のページで取得したリクエストデータまたはフレームデータに異なるドメインAJAXを使用するなど、JSを介して異なるドメイン間の通信という。長いプロトコル、ドメイン名、異なるポート任意限り、異なるドメインとして扱われます。
以下の表は、相対的な相同http://store.company.com/dir/page.htmlの結果が検出さ与えます。
クロスドメインの問題を解決するために、我々は次の方法を使用することができます。
まず、JSONPによってクロスドメイン
JS、我々は直接のXMLHttpRequestを使用し、異なるドメイン上のデータ要求では、それは不可能です。しかし、それは可能であるページ上の異なるドメインに導入JSスクリプトファイルは、JSONPは達成するために、この機能を使用しています。
例えば、a.htmlページは、それが別のドメインに取得AJAX、JSONデータ内のコードを使用する必要があり、データアドレスがJSONであることが想定されるhttp://example.com/data.php、次いでコードa.htmlあなたが行うことができます。
私たちは、アドレスを参照し、コールバックパラメータ取得データが存在し、この大会は、パラメータ名を使用することですが、あなたはあまりにも、他の使用することができます。取得したデータは、あなたがコントロールすることができますページのJSONPアドレスでない場合はもちろん、あなたが動作するために、その当事者のフォーマットに従ってデータを提供する必要があります。
それは、JSファイルとして導入、そうされているのでhttp://example.com/data.phpが返されたJSファイルを実行することができなければならないので、このページのPHPコードは次のようになります。
最終的な結果はページの出力ということです。
そうでhttp://example.com/data.php?callback=dosomething JSファイルには、我々は機能をdoSomethingの先に定義されていることを取得し、その引数は、我々は我々が必要とするクロスドメインを取得するように、JSONデータを必要とするということですデータ。
このようなJSONP原理は、スクリプトタグを介したJSファイルの導入は、このJSファイルが正常にロードされ、我々は、urlパラメータで指定された関数を実行し、我々はパラメータとしてJSONデータを必要とする、非常に明確です。だから、JSONP必要サーバー側のページには、交配を対応します。
私たちは、動的代わりに、手動で、特にこれらのスクリプトタグを書くの、クロスドメインを動作させるために、JSのスクリプトタグでクロスドメインのJSONP原理を生成することができます知っています。あなたのページはjqueryのを使用している場合、それは簡単な方法そのパッケージをJSONPによって操作することができます。
原理は同じですが、我々は、関数バックオフの手動でのスクリプトタグの挿入と同様に定義する必要はありません。jqueryの自動世話人機能として、実際には、行為のデータを取得し、その後自動的に破棄した後、コールバック=？疑問符を置き換えるためにグローバル関数を生成します。$ .GetJSONメソッドが自動的にそれは通常のAjaxのメソッドを呼び出し、クロスドメインかどうか、ではないドメイン間で決定されます。クロスドメイン、これがinvoke JSONPコールバック関数に非同期でフォームのjsファイルをロードされます。
2、document.domainをを変更することにより、サブドメインに出くわします
ブラウザは、私たちが話しているのAjax第一の方法による方法を限定しないものは、異なるソースドキュメントを要求することで、同一生成元ポリシーを持っています。第2の制限は、異なるドメイン間のブラウザのフレームの相互作用JSをできないことです。各ウィンドウオブジェクトを取得することができるように警告、フレーム（親、子またはピア）間で異なるが、であるが、退屈で、プロパティおよびメソッドを使用できないということである（のpostMessageメソッドHTML5取得したウィンドウオブジェクトそれは例外であり、あなただけの事実上役に立たないウィンドウオブジェクトであることを得ることができるよう、いくつかのブラウザは、簡単に言えば、たとえばIE6トップ、親といくつかの他の属性）のために使用することができます。例えば、そのアドレスは、ページがあるhttp://www.example.com/a.html 、このページはインラインフレームを持っている、それのsrcがあるhttp://example.com/b.htmlどうやら、我々はiframe内に何かを得るためにページ内のjsのコードで記述することができないので、このページおよびその中には、異なるドメインのiframeフレームワークです：
今回は、document.domainをは限り我々として、便利になることができhttp://www.example.com/a.htmlとhttp://example.com/b.html両方のページdocument.domainをしていますその上に同じドメイン名に設定します。しかし、設定が制限されdocument.domainを、我々は唯一のセットそのものより高いレベルまたは親ドメインdocument.domainをすることができ、およびプライマリドメインが同じでなければならないことに留意すべきです。たとえば、次のようにabexample.com document.domainを文書でabexample.com、b.example.com、example.comへのいずれかを設定することができますが、これは現在のドメインの子であるため、cabexample.comに設定することはできませんドメインは、もはや、ないBaidu.comにプライマリドメインと同じに設定することはできません。
ページ内のhttp://www.example.com/a.htmlセットdocument.domainを：
ページではhttp://example.com/b.htmlこのドキュメントドメインがexample.comですが、まだ表示されている必要がありますがまた、document.domainを設定、それが必要である、document.domainをの値を設定します。
だから我々は、JSでiframe内にさまざまなプロパティおよびオブジェクトへのアクセス権を持つことができること。
不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。如果你想通过ajax的方法去与不同子域的页面交互，除了使用jsonp的方法外，还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。
3、使用window.name来进行跨域
window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
比如：有一个页面a.html,它里面有这样的代码：
再看看b.html页面的代码：
a.html页面载入后3秒，跳转到了b.html页面，结果为：
我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话，那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然，如果有需要，其中的任何一个页面都可以对window.name的值进行修改。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。
上面的例子中，我们用到的页面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页面里的代码很简单，就是给当前的window.name设置一个a.html页面想要得到的数据值。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封装上面的过程，比如动态的创建iframe,动态的注册各种事件等等，当然为了安全，获取完数据后，还可以销毁作为代理的iframe。网上也有很多类似的现成代码，有兴趣的可以去找一下。
通过window.name来进行跨域，就是这样子的。
4、使用HTML5中新引进的window.postMessage方法来跨域传送数据
window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
上記目的メッセージが他のウィンドウに送信される各フレームはウィンドウオブジェクトを持っているので、実際に、それは、いくつかのフレームワークは、その場合があるページを指します。第二の方法を議論において、我々は、前記異なるドメイン間のフレームワークは、ウィンドウオブジェクトの反対側に得ることができるだけでなく、のwindow.postMessageこの方法を使用することができます。簡単な例で見てみましょう、2つのページがあります
私たちは、結果ページを実行した後に取得します：
私たちは、ページBの成功は、メッセージを受信ご覧ください。
PostMessageクロスドメインの送信データは簡単、非常に直感的であるが、欠点はIE6で、IE7がサポートされていない使用するには、実際のニーズに応じて決定するためにそれを使用する必要はありません。
結論：
上記の方法に加えて、だけでなく、フラッシュでは、サーバー上のプロキシページや他のクロスドメインのモードを設定し、ここで紹介されていません。
4つの方法は、プロジェクトのアプリケーションの実際の状況に応じて選択することができる上に、この方法は、ほとんどすべてのブラウザ本当に優れているクロスドメイン方式でwindow.nameはまた、複雑な互換性を考えていません。
---------------------
著者：戦士
出典：CNBLOGS
オリジナルます。https：//www.cnblogs.com/2050/p/3191744.html
免責事項：この記事作者オリジナルの記事は、再現し、ボーエンのリンクを添付してください！
コンテンツ分析：CSDN、CNBLOGのブログ記事は、キープラグ復刻しました