JavaScript クロスドメインソリューションの概要 (コード)

この記事は、クロスドメイン ソリューションの概要 (コード) を提供します。これには一定の参考価値があります。困っている友人は参照できます。お役に立てば幸いです。

同一生成元ポリシー: プロトコル、ドメイン名、ポートはすべて同じです。

独自の制限事項:

Cookie、localStorage、indexDB は読み取れません。

DOM を取得できません。

AJAX リクエストを送信できません。

解決策:

1. JSONP

原則: 要素を動的に追加して、サーバーに JSON データをリクエストします。サーバーはリクエストを受信し、指定された名前付きコールバック関数にリクエストを返します。

例:

function addScript(src) { var script = document.createElement('script'); script.setAttribute("type", "text/javscript"); script.src = src; document.body.appendChild(script); }

window.onload = function() { addScript("https://segmentfault.com/data?callback=getData"); }

function getData(data) { console.log(data) } 注: 1, クエリの URL 内のコールバックでは、コールバック関数の名前を指定する必要があります。 2. がブラウザでコードとして実行されると、定義された getData 関数がすぐに呼び出されます。 3. 返された JSON パラメーターは文字列ではなく JavaScript オブジェクトとして使用されるため、JSON 変換は必要ありません。 4. jqueryライブラリの$.getJSON()も実装可能です。

$.getJSON("https://segmentfault.com/data?callback=?", function(data) { console.log(data) }) 欠陥: は GET を通じて取得され、POST をサポートしていません。

2. window.postMessage

window.postMessage では、同じソースからのものであるかどうかに関係なく、クロスウィンドウ通信が可能です。 postMessage の最初のパラメータはコンテンツを渡すもので、2 番目のパラメータはプロトコル ドメイン名ポートまたは (* はドメイン名が制限されていないことを意味します)

页面一："https://www.segmentfault.com/page1.html" //传递页面 window.onload = function () { if (typeof window.postMessage === undefined) { alert("浏览器不支持postMessage！"); } else { window.open.postMessage({data: "Hello World"}, "https://www.example.com/page2.html"); } } 页面二："https://www.example.com/page2.html" //接收页面 window.addEventListener('message', function(e) { console.log(e.data); },false); window.addEventListener('message', function(){}); イベント オブジェクトeventには 3 つの属性があります: 1.event.source: メッセージを送信するウィンドウ 2.event.origin: URLメッセージの送信先 3.event.data: メッセージの内容

//引用父窗口发送信息给下一个窗口 window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); } //过滤不是发给本窗口的信息 window.addEventListener('message', receiveMessage); function receiveMessage(event) { if (event.origin !== 'http://www.segmentfault.com/page1.html') return; if (event.data === 'Hello World') { event.source.postMessage('Hello', event.origin); } else { console.log(event.data); } } 3.iframe

iframeloadingページとsrcのターゲットドメインが同じドメインであるため、ajaxリクエスト(親子ウィンドウ)を開始することが可能です。 //ソースが同じであることが前提となるため、異なるソースから Ajax リクエストを開始することはできません。

同じ原点を持つ異なるウィンドウ間ではウィンドウオブジェクトの取得は可能ですが、ウィンドウオブジェクトのプロパティやメソッドは取得できません。 //異なるソースではエラーが報告されます

1. document.domain iframe (同じソースが利用可能 - クロスサブドメイン)

document.domain 属性: 第一レベルのドメイン名は同じですが、第2レベルドメイン名が異なります ウィンドウオブジェクト取得中

页面一："https://segmentfault.com/page1.html" window.onload = function() { document.domain = "https://segmentfault.com/"; //设置domain window.getData = function() { //ajax请求 } } 页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //document.domain设置成自身或更高一级的父域，主域必须相同。 document.domain = "https://segmentfault.com/" //设置domain function test() { var win = document.getElementById("iframe").contentWindow; win.getData("https://segmentfault.com/json_domain.php", function() {}) } 欠陥: プライマリ ドメイン名は一貫している必要があります 。

2. window.name iframe (同じオリジン以外でも使用可能) window.name Attributes: ウィンドウのライフサイクル中、オリジンが同じかどうかに関係なく、同じウィンドウの読み込みページの window.name 属性が共有され、各ページを操作できます。

页面一："https://segmentfault.com/page1.html" window.name = "this is data!" 页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //获取window.name function test() { var winName = document.getElementById("iframe").contentWindow.name; winName.src = "https://segmentfault.com/data.html"; //最后需要将iframe的src设置成当前域的一个页面地址 } 欠陥: 互換性が悪い

3. location.hash iframe (オリジナル以外のソースが利用可能) フラグメント識別子: フラグメント識別子は、url# 番号の後の部分を指します。フラグメント識別子のページを変更しただけでは更新されません。

页面一："https://www.segmentfault.com/page1.html" function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'https://www.example.com/page2.html#messgae'; document.body.appendChild(ifr); } function checkHash() { var data = location.hash ? location.hash.substring(1) : ''; } setInterval(checkHash, 2000); 页面二："https://www.example.com/page2.html#messgae" function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全机制无法修改parent.location.hash， // 所以要利用一个中间的example域下的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata'; // 注意该文件在"segmentfault.com"域下 document.body.appendChild(ifrproxy); } } 页面三："ttps:/www.segmentfault.com/page3html#somedata" //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1); 欠点: データは URL 内で公開され、長さも制限されます。

4. WebSocket

WebSocket: ブラウザは、JavaScript を通じて WebSocket 接続を確立するリクエストをサーバーに送信します。接続が確立された後、クライアントとサーバーは次のことを行うことができます。 TCP Exchange データを介して直接接続します。

WebSocket リクエスト ヘッダー情報を設定すると、サーバーがそれをサポートします。

Origin: http://example.com //根据域名是否在白名单内来判断是否可以通信 欠点: 実装コストが高い。

5. CORS

cors は、クロスドメインのリソース共有です。現在の CORS 通信の鍵となるのはサーバーです。サーバーが CORS インターフェイスを実装している限り、クロスオリジン通信が可能です。

欠点: サーバー構成により、メイン ドメインの帯域幅が占有されます。

この記事はここで終了しました。さらに興味深いコンテンツについては、PHP 中国語 Web サイトの JavaScript ビデオ チュートリアル 列に注目してください。

JavaScript クロスドメイン ソリューションの概要 (コード)

JavaScript クロスドメインソリューションの概要 (コード)