皆さまこんにちは、ウチイダユウゴです！
昨年下期から年末にかけて、IE対応必須のWebサイトを担当してまして…
その中でちょっとやられたのがIEでHTMLファイルをダウンロードしたときの挙動でした。
htmlファイルをブラウザ経由でダウンロードする
クライアントから、なるべく簡単にグローバルナビゲーションの変更をしたいと要求をいただいていました。
今回の案件ではサーバーサイドのCMSは使えないため、共通部分のhtmlファイルを作成・編集してjsで指定部分に読込させるという仕様で作成したのです。
幸い、ファイル管理機能はWEB経由のものがありました。
そこから共通htmlファイルをダウンロードして編集した後、
同じ名前で上書きアップロードしてもらうことで簡単に対応できました。
IEではファイル拡張子が変わる
IE必須だったので、念のため全動作をIEでもチェックしていた時のことです。
共通htmlファイルをダウンロードすると、「common.htm」になってしまうことが発覚しました。
調べてみると、歴史的な経緯で、4文字の拡張子が扱えないのだとか…
今回のクライアントは、あまりIT得意じゃない方たちなので、拡張子はhtmlにしてください、といってもおそらく理解してもらえなさそうなのでした…。
そもそも、Windowsの初期設定って拡張子が表示されないので、何を変更すればいいのかもわからない可能性があります。
対策：素直にjavascript側で対応しました
特定ファイル名をajaxで取りに行ったときに404エラーが出たら、拡張子を「htm」に変えて再試行するように処理を追加して対応しました。
$.ajax({
type: 'get',
url: './path/to/common.html',
dataType: 'html'
}).then(
function(res){
/* 取得成功時のコールバック
* 既定の要素内に、取得したhtmlファイルの中身を挿入
*/
$('.wrap').append($(res));
},
function(res){
/* 取得失敗時のコールバック
* 拡張子をhtmファイルにしてリトライ
*/
$ajax({
type: 'get',
url: './path/to/common.htm',
dataType: 'htm'
}).then(
function(res){
$('.wrap').append($(res));
},
function(res){
/* htmファイルも見つからなかったとき、
* エラーテキストを入れておく
*/
$('.wrap').append($('<div class="noticeBlock">エラー：読み込みに失敗しました</div>'));
}
)}
);サンプルなので関係する部分だけシンプルに抜きだしたつもりが、長いしわかりづらいですね…
実際のコードは、アクセスしているページによって内容を振り分けたりする仕様も含んでいたので…。
これよりも更にコールバック地獄になっていました(´；ω；`)
IE対策のためにこんなにわかりづらくなっちゃうというのがなんともやるせないです。
まだまだIE必須のクライアントもいるんですよね。。。
ajax呼び出しの部分はfunctionに切り出すとか、いっそきちんとクラス化するとか考えたらよかったのかもしれませんが…
途中で書きなおす工数もとれなかったので、コメントで説明することで良しとしてしまいました。
もっときれいなコード書けるようになりたいですね～精進せねば！
以上、最後までお読みいただきありがとうございました(/・ω・)/
コメント