勉強したことのメモ

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

  関連記事

jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...

JavaScriptでデータをGzip等で圧縮できる「pako」ライブラリの利用方法

以前「zcookies」というライブラリの利用方法をメモしたが、当該ライブラリの ...

JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

jQueryプラグインでクリップボードにコピーする方法(clipboard.js)

ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...