javascriptクロスドメイン総括のwindow.name実現のクロスドメインデータ転送
1959 ワード
自分で実践してみました.本当に使いやすいです.特に具体的な実現方法を下記の通り記録します.
三つのページがあります
a.com/app.html:アプリケーションページ. a.com/proxy.html:エージェントファイルは、一般的には何の内容もないhtmlファイルであり、アプリケーションページと同じ領域にある必要があります. b.com/data.html:アプリケーションページはデータを取得するページであり、データページと呼ぶことができます.
実現するための基本的な手順は以下の通りです.
アプリページ(a.com/app)でiframeを作成し、そのsrcをデータページ(b.com/data)に向ける. データページはこのiframeのwindow.nameにデータを添付します.data.htmlコードは以下の通りです.
三つのページがあります
a.com/app.html:アプリケーションページ. a.com/proxy.html:エージェントファイルは、一般的には何の内容もないhtmlファイルであり、アプリケーションページと同じ領域にある必要があります. b.com/data.html:アプリケーションページはデータを取得するページであり、データページと呼ぶことができます.
実現するための基本的な手順は以下の通りです.
アプリページ(a.com/app)でiframeを作成し、そのsrcをデータページ(b.com/data)に向ける. データページはこのiframeのwindow.nameにデータを添付します.data.htmlコードは以下の通りです.
window.name = 'I was there!'; // , 2M,IE firefox 32M
// , json、
アプリページ(a.com/app)でiframeのonloadイベントを傍受し、このイベントに設定されたこのiframeのsrcは、この地域のプロキシファイル(プロキシファイルとアプリケーションページが同じエリアにあるため、相互通信が可能)を指します.アプリ.部分コードは以下の通りです.
var state = 0,
iframe = document.createElement('iframe'),
loadfn = function() {
if (state === 1) {
var data = iframe.contentWindow.name; //
alert(data); // 'I was there!'
} else if (state === 0) {
state = 1;
iframe.contentWindow.location = "http://a.com/proxy.html"; //
}
};
iframe.src = 'http://b.com/data.html';
if (iframe.attachEvent) {
iframe.attachEvent('onload', loadfn);
} else {
iframe.onload = loadfn;
}
document.body.appendChild(iframe);
データを取得した後、このiframeを破壊し、メモリを放出します.これはまた、セキュリティ(他のドメインframe jsにアクセスされない)も保証されている.
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
まとめると、iframeのsrc属性は外域から本地域に移り、クロスドメインデータはiframeのwindow.nameによって外域から本地域に伝えられます.これは、ブラウザのクロスドメインアクセス制限を巧みに迂回していますが、同時に安全操作です.