検索

ホームページ >ウェブフロントエンド >jsチュートリアル >JS クロスドメインの概要_JavaScript スキル

JS クロスドメインの概要_JavaScript スキル

WBOY
WBOYオリジナル
2016-05-16 17:50:361124ブラウズ

クロスドメイン JavaScript には 2 つのケースがあります。
1. 同じ親ドメインに基づくサブドメイン間 (例: a.c.com と b.c.com)
2. 異なる親ドメインに基づくサブドメイン間 (例: www. a.com と www.b.com
3. ポートが異なります。例: www.a.com:8080 と www.a.com:8088
4. プロトコルが異なります。 http://www.a.com および https://www.a.com
状況 3 と 4 については、バックグラウンド プロキシを通じて解決する必要があります。
a.イニシエーターのドメインでプロキシ プログラムを作成します
b. イニシエーターの js がこのドメインでプロキシ プログラムを呼び出します
c. プロキシは受信者にリクエストを送信し、対応するデータを取得します
d.取得したデータをイニシエーターの JS に送信します
イニシエーター ページのコードは次のとおりです:

コードをコピーします コードは次のとおりです:











< div id="divData">




受信方页面代码如下：
复制代 代码如下：






2、アニメーション态创建スクリプト:
a、在発行方页面动态加圖一スクリプト、スクリプトの URL 指向受信側一処理地址(後台)、地址返還的 javascript メソッド会
が実行され、さらに URL 内でいくつかのパラメータを転送できます。このメソッドは GET 方式のパラメータのみをサポートしています。代幣如下:

复制代 代幣如下:

スクリプト テスト







受信方服务器端代码如下：

复制代 代码如下：
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.ContentType = "application/x-javascript";
Response.Write(String.Format(@"alert('{0}');", DateTime.Now));
Response.End();
}

3、location.hash iframe：
a、発行方创建一隐藏的 iframe、iframe の源は受信方の页面を指向し、通過受信方页面のハッシュ値データを送信する
b、発行者は自分の location.hash を時間監視し、対応する処理を実行します
c、受信者は iframe を作成し、iframe のソースは発行者がいるドメインの 1 つを指向しますプロキシ面は、受信者に送信者が入力したデータに基づいて処理されたデータをプロキシ面のハッシュ値で送信し、
d を送信し、受信者はタイマーを作成し、自分の location.hash を測定し、対応するものを作成します。処理
e、代理人页面创建一定タイマー、時間監視自己の location.hash を同時に更新発行起方页面のハッシュ値
www.a.com/a.html#aaa、その中の#aaa就はlocationです。ハッシュ值
発行方页面代码如下：

复制代码 代码如下:










受信方页面代码如下：
复制代 代码如下：






発行方域下の代理页面代码如下：
复制代码 代码如下：




4、window.name:
a、発行方页面创建的iframe、およびソース指向受信方页面
b、受信方在自己スクリプト経由送信必要のデータが window.name に配置されている
c、iframe の onload メソッドで iframe のソースが同じドメインにあるプロキシ 面に変更されます (同じドメインにのみアクセスできるウィンドウであるため)。 name の值)
d、取得window.name の值(虽然iframeのソース変更完了，ただしwindow.nameの值不会变)
window.nameの值差不多可有2MB大小
発行方页面代码如下：
复制代 代码如下:









受信方页面代码如下：
复制代 代码如下：




発行方域下の代理人页面代码如下：

（其のもの都不用写）
5、HTML5 の postMessage
a、receiverWindow.postMessage(msg, targetOrigin)、receiverWindow は受信メッセージのウィンドウの参照、iframe の contentWindow/ウィンドウである可能性があります。 open の戻り値/window.frames 内の 1 つ、msg は送信されるメッセージ、文字列型、targetOrigin は受信者ウィンドウの URI を制限するために使用され、メインドメイン名とポートポートが含まれます。「*」は制限を示しますが、安全性を高めるためにも必要です。
b では、メッセージがターゲットの Web サイトに送信されるのを防ぐために、受信者はメッセージ イベントを介してメッセージを取得し、event.origin のプロパティを介してメッセージを受信します。送信者は、event.data を通じて送信されたメッセージの内容を取得し、event.source から送信者のウィンドウオブジェクトを取得します。

代码如下:




受信方页面代码如下：



复制代

代码如下：


6、window.opener（IE6、7 用、つまりオペラハック方法、不过外観似现在已经不管用了，只要打过微软的安全补丁.kb2497640就不用了）
a、発行方页面创建的 iframe、およびソース指向受信方页面
b、発行方页面通過 iframe.contentWindow.opener = {a: function(params){...}, b: function (params){...} ...}来受信者指定可能なメソッド
c、受信者面経由 window.opener.a/window.opener.b から受信者指定可能なメソッド
d、受信方页面通過parent.opener = {c: function(params){...}, d: function(params){...} ...}来定可能公開起方调用メソッド
e、発行方页面経由opener.c/opener.d来调使用受信方定的方法
その原理は重置openerオブジェクトです
発​​行方页面代码如下：




复制代码

代码如下:





受信側ページのコードは次のとおりです:



コードをコピー
コードは次のとおりです: ="javascript" type="text/javascript"> window.navigator .c = function(msg) {alert('c メソッドを呼び出したところ、次のメッセージが表示されました:' msg); }
window.navigator.c = function(msg) navigator.d = function(msg) {alert('d メソッドを呼び出したところ、次のメッセージが表示されました:' msg); }
setInterval(function() { window.navigator.a('aaa'); }, 2000 );
setInterval() { window.navigator.b('bbb') ; }, 2000);


声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jqueryアニメーション2.要素座標アニメーション効果(絵コリドーの作成)_jquery次の記事：jqueryアニメーション2.要素座標アニメーション効果(絵コリドーの作成)_jquery

関連記事

続きを見る