勉強したことのメモ

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

  関連記事

Leafletでマーカーを動的に変更し、変更状況をCookieに保存する方法

Leafletでポップアップ(フキダシ)内のボタンをクリックするとマーカーを動的 ...

金融機関コード(銀行番号)や支店コード(支店番号)から銀行名や支店名を取得する方法

金融機関コード(銀行番号)や支店コード(支店番号)をから銀行名や支店名を取得した ...

jQueryにて指定した要素の親要素を削除する方法

jQueryにて指定した要素の親要素を削除したいケースがあった。通常の場合だと親 ...

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

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

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

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