勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

クロスドメイン突破をjavascriptで行う

   2014/07/02  JavaScript

ajaxとかでクロスドメインを突破する際は、
PHPファイルを介すかJSONPを使うが、
javascriptだけで行った場合どうなるのかメモ。

■参考サイト
http://www.albert2005.co.jp/study/javascript/ajax.html

■実験
Bサーバーにcloss.jsという名前で
callback({"num":[1,2,3], "abc":["a","b","c"]})
だけ記述してアップ。

Aサーバーで
<script>
var script = document.createElement('script');
script.src="Bサーバーにアップしたcloss.js";
window.callback = function(data){
cross (data);
}
document.body.appendChild(script);

function cross (data) {
for (var i = 0, len = data.num.length; i < len; i++) {
console.log(data.num[i]);
} //1,2,3が出力される
for (var i = 0, len = data.abc.length; i < len; i++) {
console.log(data.abc[i]);
} //a,b,cが出力される
}
</script>
とするとコンソールログに出力される

■どうなっているのか?
単純に外部スクリプトを読み込んで、外部スクリプトで定義されている
グローバル変数とか関数を入手し、Aサーバーで出力させている。

確かに外部スクリプトの読み込みであれば、クロスドメインだろうが
なんだろうが読み込める。

その後に関数とか変数を主サーバーで扱えるというのが知らなかった。

■その他
document.createElement(name)
http://www.marguerite.jp/Nihongo/WWW/RefDOM/createElement.html

appendChild
http://www.marguerite.jp/Nihongo/WWW/RefDOM/appendChild.html

 - JavaScript

  関連記事

CodeIgniter4 & jQueryを用いて同一サイト内でajax通信する方法

CodeIgniter4.4.4 & jQueryを用いて同一サイト内で ...

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法

先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...

JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法

サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...

PHPの配列をファイルに保存してPHPやJavaScriptで呼び出す方法

PHPの配列をファイルとして保存し、別のページからPHPやJavaScriptで ...