クロスドメイン js (画像 ping、JSONP、CORS)_javascript スキルを達成するためのいくつかの方法のまとめ

クロスドメイン

同一生成元ポリシーはありますが、document.domain、window.name、image ping、jsonp、CORS など、クロスドメインは依然として js で非常に一般的です。ここでは、image ping、jsonp、 CORS の準備は忘れます。

画像のping

画像は任意の URL からロードできるため、img の src を別のドメインの URL に設定すると、onload イベントと onerror イベントを使用して応答を受信したかどうかを判断できます。

var img=new Image();
img.src='http://www.jb51.net';
img.onerror=function(){
 alert('error');
}
img.onload=function(){
 alert('success');
}

ここで新しい img オブジェクトが作成されます。指定された URL はブログのアドレスであるため、URL が画像 http://images.jb51 に変更されるとエラーが表示されます。 net//710118 /o_MacBook Air.png を実行すると、onload 読み込み成功の情報がポップアップ表示され、シンプルなクロスドメインが実現されます。

ドメイン間でイメージ ping を使用すると、get リクエストを送信することしかできず、応答のテキストにアクセスすることはできません。これは、広告のクリックを追跡するために使用できます。

jsonp

jsonp はコールバック関数 callback を備えた json で、本来の名前はパディングされた json とパラメーター json として変換されます。

スクリプトのソースはドメインをまたぐことができるため、送信されたURLの後にコールバックパラメータを追加してサーバーに渡します。このコールバックが実装されているため、サーバーから返されたデータがコールバックのパラメータとして使用されます。自分たちでjsonデータを受け取って処理することができます。

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

<script type="text/javascript">
function call(data){
 alert(data.city);
}
</script>
<script type="text/javascript" src='http://freegeoip.net/json/&#63;callback=call'></script>

ここでは、スクリプトの src を http://freegeoip.net/json/?callback=call に設定します。これは、ユーザーの IP アドレスを取得するための API (興味がある場合は、ここをクリックして参照してください)、URL のパラメータとしてコールバックを結合すると、返された JSON データがコールバックのパラメータとして使用されます。ここでは、コールバックを呼び出し関数として定義します。つまり、返される JSON データは次のようになります。この呼び出し関数は、ユーザーの都市のみをポップアップ表示します。ここでの出力結果は河北です。その他の IP 情報については、国名、タイムゾーンなどの詳細なリストが記載されている公式 Web サイトを確認してください。

CORS (相互リソース共有)

CORS は、ajax とほぼ同じで、xdr オブジェクトである XDomainRequest がインスタンス化されます。トリガーされるイベントは、load と error です。メソッドはxhrとほぼ同じで、openとsendも必要です。

ff や chrome などの他のブラウザでは、xhr がインスタンス化されます。ここでは、myvin はデモンストレーションのために xhr のみを使用します。クロスブラウザを実現したい場合は、xdr と連携して互換性を実現します。

xhr は次のとおりです:

var xhr=new XMLHttpRequest();   
var url="http://www.jb51.net";
xhr.open('GET', url); 
xhr.send(null);

ここで使用される URL は http://www.jb51.net です。ajax との唯一の違いは、URL がクロスドメインの絶対アドレスを使用することです。アドレスまたは絶対アドレス。

コンソールを見ると、ここではff40.0.3が使用されており、表示される情報は次のとおりです:

クロスオリジン要求がブロックされました: 同一オリジン ポリシーにより、http://www.jb51.net にあるリモート リソースの読み取りが禁止されています。 (原因: CORS ヘッダー「Access-Control-Allow-Origin」がありません)。

CORS を使用してクロスドメインを実装するには、サーバー側で Access-Control-Allow-Origin を設定するという手順がもう 1 つあります。