2012-03-09
投げやりにSIer特有の画面ポップアップ&ファイルダウンロードコンボを実装する
「クリックしたらポップアップウィンドウが出て、自動的にファイルのダウンロードが始まり、終わったらファイルの保存ダイアログを出して、ダウンロードが終了したらポップアップのウィンドウ自体は自動的に閉じる(ただし途中でエラーが発生した場合は表示)」などという、非常にSIerらしい、とても斜め上のご用件がありまして、XHRを使ったりlocation.hrefでごにょごにょしたりという、素晴らしく非生産的な行為に半日くらい費やしてしまったので、メモ。
ちなみにIE6です。
ポイントは以下。
- XHR(XmlHttpRequest)で、ダイアログを表示させるようなファイルダウンロード(所謂application/octet-stream)はできない(responseText、responseXMLのどちらでもないため) 叩くとreadyState = 4 & 200番とか帰ってくるが騙されるな
- location.hrefだと画面遷移(この場合はファイルダウンロード)を終えきってからウィンドウを閉じる、などができない(もしかしたら色々頑張ればできるのかもしれない)
- しかも、IE6でlocation.hrefでファイルダウンロードAPIを叩くとまったくステータスバーが動かないので、画面的に何が起きてるのかわからなくてユーザ様がお怒り
というわけで、結論的にはiframeに落ち着きました(死にたい)
こんな感じのHTMLをwindow.open()等で開いてさしあげます。(僕はもちろんモーダルウインドウを強いられ白目)
<html><...> <body onload="window.close();"> <iframe onload="alert('downloaded')" src="/DOWNLOAD_URI/"></iframe> </body> </html>
これだけでiframeのsrc指定したものが自動的に叩かれ、終わったらiframeのonload -> body onload の順番で指定した関数が呼ばれます。iframeのonloadは500とか食らうと発生しない(#1, #2)ので、適当にフラグとか持たせれば簡単にエラーハンドリングができました。iframeが見えるの嫌ならdisplay:noneとかしてやればよろしいです。
しかし、さすがに今時、IE6のXHR(MSXML2.XMLHTTP)を生で書くはめになるとは思いませんでした。SIerは広大ですね……。あとJavascriptは一回マジに勉強せんといかんとおもいました。はーつら
#1 これはもしかするとIE6特有の挙動かもしれません。インターネットに繋がらずFirefoxすら入れることを許されないというアウシュビッツみたいな職場でテーブルタグにこらしめられたのでもはや手元の環境で試す気にもなれず
#2 システムテストでIPがインターネット上になったとたん、この方法では動かなくなりました。IE6 sp2の場合iframeでダウンロードさせるにはセキュリティゾーンで認可されたサイトになるように設定してあげるか、セキュリティの権限をいじってあげる必要があるようです。僕の場合はなんだかようわからないですけどお客さんがブラウザ側で設定してくれることになりました。なので正直、ここに書いてある実装はあんまりよろしくないです。
- 140 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cts=1331455342553&ved=0CDoQFjAA&url=http://d.hatena.ne.jp/tkizm/20110727/1311761298&ei=amVcT420H-X4mAW1uvirDw&usg=AFQjCNG0bSp3JyPyjSc8_n5Ys5twYnn6Yg&sig2=5F8UGHPFSdUUz9HjMoEqmA
- 62 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&cts=1331380156394&ved=0CDEQFjAB&url=http://d.hatena.ne.jp/tkizm/20110914/1315996197&ei=tz9bT6N-7tKYBYCYyKYP&usg=AFQjCNG9-z4bm0hpGYnRf0EqCiNGMeCzRQ&sig2=I9kHEPyK5jttzbtM-XdskQ
- 52 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&frm=1&source=web&cd=3&cts=1331454394859&ved=0CEUQFjAC&url=http://d.hatena.ne.jp/tkizm/20110328/1301282875&ei=AmFcT_CpAuPjmAWAprSvDw&usg=AFQjCNFg6Gw6QFiB_Ob_Ro-mdTFblu4_zA&sig2=zU-3yRUmOBfPxcVvo9
- 49 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=3&cts=1331349694816&ved=0CDYQFjAC&url=http://d.hatena.ne.jp/tkizm/20110321/1300722312&ei=eshaT6jZDJHImQWeivnFDw&usg=AFQjCNHzlGBQKQXZGl22HwF1M-lpXsY8bA
- 46 https://www.google.co.jp/
- 43 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=4&cts=1331608730326&ved=0CEsQFjAD&url=http://d.hatena.ne.jp/tkizm/20120309/1331305203&ctbs=qdr:y&ei=UbxeT7iUC4GYiAebirHIBw&usg=AFQjCNEm2g0htmeM4deOwGUDdNg6JnUHjw
- 32 http://acez.jp/archive.html
- 27 http://www.google.co.jp/url?sa=t&rct=j&q=ora-00904+poltyp&source=web&cd=1&ved=0CDgQFjAA&url=http://d.hatena.ne.jp/tkizm/20110727/1311761298&ei=Z0NhT-DqO-2viQej6NlN&usg=AFQjCNG0bSp3JyPyjSc8_n5Ys5twYnn6Yg
- 24 http://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cts=1331368248788&ved=0CE4QFjAE&url=http://d.hatena.ne.jp/tkizm/20110801/1312181426&ei=VBBbT_WtLqOUiAf-s8m0DQ&usg=AFQjCNG8WBqNxDN7NbmQpIJf4H33nHe_Fw&sig2=MMrDwuknclSMtMPLgIXfPA
- 23 http://t.co/a0WtIR7G