JS クロスドメインの概要_JavaScript スキル-jsチュートリアル-php.cn

クロスドメイン 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 に送信します イニシエーター ページのコードは次のとおりです:

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

🎜>function GetDataFromProxy() { var src = document.getElementById( 'txtSrc').value; var request = null; if (window.XMLHttpRequest) { request = new XMLHttpRequest( ); } else if (window.ActiveXObject) { request = new ActiveXObject("Microsoft.XMLHTTP"); request.onreadystatechange = function() { varready = request.readyState; var data = null; { if (ready == 4) { data = request.responseText; document.getElementById('divData') .innerHTML = データ; } else { document.getElementById('divData').text = "読み込み中"; } } } var url = "Proxy.ashx?src=" エスケープ(src); request.open("get",url,false); } </script&gt ;

イニシエーター プロキシ コードは次のとおりです:

コードをコピーします コードは次のとおりです。 System.Data を使用; System.Web を使用; System.Web.Services を使用;プロトコル; System.Xml.Linq を使用; System.Net を使用; 名前空間 WebApplication1 // / /// $codebehindclassname$ の概要説明 // / [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] パブリック クラス プロキシ : IHttpHandler { const int BUFFER_SIZE = 8 * 1024; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string src = context.Request ["src"]; WebRequest wr = WebRequest.Create(src); WebResponse wres = wr.GetResponse (); エンコーディング resEncoding = System.Text.Encoding.GetEncoding("gb2312"); StreamReader sr = new StreamReader(wres.GetResponseStream(), resEncoding); ); sr.Close(); context.Response.Write("

br/>gt;"); context.Response.Write(html); } public bool IsReusable { get { return false; } } } }

バックグラウンド プロキシの使用に加えて、状況 1 と 2 を解決するには 7 つの方法があります。 1.ケース 1 のみ解決できます): a. 開始側ページで document.domain を設定し、受信側ページで値を親ドメインのメイン ドメイン名 (window.location.hostname) に設定します b開始側ページに非表示の iframe を作成します。iframe のソースは受信側ページです c. ブラウザーに応じて、iframe.contentDocument || 受信側ページのコンテンツを取得します。 d. 受信者ページの取得したコンテンツを通じて受信者と対話します この方法の欠点の 1 つは、あるドメインが攻撃されると、別のドメインにセキュリティ ホールが発生することです。 イニシエーター ページのコードは次のとおりです:

コードをコピーします

コードは次のとおりです:

document.domain = 'a.com'; var src = document.getElementById('txtSrc').value; var ifr = document.createElement('iframe'); ifr.src = src; ifr.style.display = 'なし'; document.body.appendChild(ifr); function GetDataFromDomain() { var doc = ifr.contentDocument || ifr.contentWindow.document; alert(doc.getElementById("data").value); } 受信方页面代码如下： 复制代 代码如下：

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

复制代 代幣如下: スクリプト テスト functionload_script(callback){ var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); var src = document.getElementById('txtSrc').value; script.type = 'text/javascript'; script.src = src; //jQuery による script 全域メソッド script.onload = script.onreadystatechange = function(){ if((!this.readyState||this.readyState === "loaded"| |this.readyState === "完了")){ callback && callback(); // IE でのメモリ リークを処理します script.onload = script.onreadystatechange = null; if ( head && script.parentNode ) { head.removeChild( script ); } } }; // IE6 のバグを回避するには、appendChild の代わりに insertBefore を使用します。 head.insertBefore( script, head.firstChild ); }

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

复制代 代码如下： 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です。ハッシュ值 発行方页面代码如下：

复制代码 代码如下:

代码如下: function getData() { var ifr = document.getElementById('ifr'); var targetOrigin = 'http://www.b.com'; if (ifr.contentWindow.postMessage) { ifr.contentWindow.postMessage('PostMessageTest2', targetOrigin); } }

受信方页面代码如下：

复制代

代码如下： window.addEventListener('message', function(event) { if (event.origin == 'http://www.a.com') { alert(event.data); alert(event.source); } }、false);

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オブジェクトです 発行方页面代码如下：

复制代码

代码如下: ;/iframe> var ifr = document.getElementById('ifr'); ifr.contentWindow.opener = { a: function(msg) {alert('a メソッドを呼び出したところ、次のメッセージが表示されました:' msg) } }

受信 スクエアページのコードは次のとおりです:

コードをコピー コードは次のとおりです: window.opener.a('aaa'); ;/script>

7. window.navigator (IE6 および 7 に適用可能ですが、まだパッチが適用されていないようです) a. イニシエーター ページは非表示の iframe を作成します。ソースは受信者ページを指します b. イニシエーター ページは window.navigator.a = function(params){...}; を使用して、レシーバーによって呼び出されるメソッドを定義します c. レシーバー ページは、window.navigator.a(params); window.navigator.b(params); d を介してイニシエーターによって定義されたメソッドを呼び出します。 window.navigator.c = function( params){...}; window.navigator.d = function(params){...}; イニシエーター ページが window を渡します。 .navigator.c(params); window.navigator.d(params); 受信者によって定義されたメソッドを呼び出す イニシエーター ページのコードは次のとおりです:

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

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

コードをコピー コードは次のとおりです: ="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);