勉強したことのメモ

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

  関連記事

JavaScriptで配列やオブジェクトの値を検索する方法
JavaScriptで配列やオブジェクトの値を検索する方法

JavaScriptにて配列やオブジェクトの値を検索する際、今までだとループを回 ...

NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法
NicEdit(WYSIWYGエディタ)に画像アップロード機能を追加する方法

NicEdit(ウィジウィグエディタ)に画像アップロード機能を追加したかった。本 ...

CKEditor(WYSIWYGエディタ)の設置方法と日本語化
CKEditor(WYSIWYGエディタ)の設置方法と日本語化

今までWYSIWYGエディタを導入する際はNicEditを使用していたが、あんま ...

テキストエリアを選択すると中身を全選択状態にする方法
テキストエリアを選択すると中身を全選択状態にする方法

テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...