「Tips」タグアーカイブ

fetchやxhrを使った時にIEが勝手にキャッシュする問題を解決する

fetchやxhrを使って非同期通信をしているとIEでは勝手にキャッシュからデータを取得してサーバーにリクエストしないことがある。

そういう時はIf-Modified-Sinceヘッダーを追加してリクエストするとよい。

fetch('url', {
	defaultHeaders: {
		'If-Modified-Since': 'Thu, 01 Jun 1970 00:00:00 GMT'
	}
});
xhr.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');

If-Modified-Sinceは指定した日時より新しいファイルがサーバーに存在する場合のみ取得するという条件つきリクエストで、この例では、キャッシュを実質的に無効にしている。

以下はIf-Modified-Sinceヘッダーの書式だ


If-Modified-Since: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT

IEはよくわからないタイミングでキャッシュを利用するのでこのヘッダーは必須なように思われる。IEの寿命が尽きるまで・・・

【JavaScript】IEのためにa要素のdownload属性を代替する

a要素のdownload属性を使えばchromeなどのモダンブラウザではコンテンツをダウンロードできるわけだが、IEはそうはいかない。例えば、下の画像をダウンロードする時、IE以外のモダンブラウザではこのように書けばダウンロードされる。

var a = document.createElement('a');
a.href = '/img/1.jpg';
a.download = 'neko';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

IEではダウンロードが実行されずにそのままページ遷移してしまうのがわかる。そこで今日は、代替方法を書く。

その方法とは、xhrでrequestを送り、blobで返してもらいそれをダウンロードするという方法だ。下がそのコードである。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/img/1.png');
xhr.responseType = 'blob';

xhr.onloadend = function() {
	if(xhr.status !== 200) return;
	window.navigator.msSaveBlob(xhr.response, 'neko');
}
xhr.send();

IEにはnavigatorオブジェクトにmsSaveBlob(blob, fileName)というメソッドが用意されているようで、blobのダウンロードにはこれを使う。

もうすでにお気づきの方もいるかもしれないが、これは完全な代替方法にはなり得ない。なぜならxhrはクロスドメイン制限があるからだ。つまり、同一ドメインか、CORS(Cross-Origin Resource Sharing)に対応していないとダウンロードきない。そして、blobのやりとりはIE9以下は対応していない。しかし、使える機会はあると思うので、もしよかったら使ってほしい。

他にいい方法を知っているという方はぜひ教えてください><

【JavaScript】HistoryAPIを使った非同期遷移なサイトにハッシュ(#)を含むURLでアクセスされた時

非同期遷移なサイトにハッシュ(#)を含むURLでアクセスされた時、目的の要素までスクロールするという処理を自分で実装しないといけないことがある。例えば、http://example.com/aaa/からhttp://example.com/bbb/#cccに非同期遷移した場合、当たり前だが、ブラウザはid=”ccc”の要素までスクロールしない。そこで、今回は自分で目的要素までスクロールする処理を考えてみる。

自分で実装と言ってもそこまで難しくはなく、スクロールするだけなら単にAPIで用意されている、elementのscrollIntoViewメソッドを呼べばいい。つまり、ハッシュの文字列を得て、該当の要素のscrollIntoViewメソッドを呼ぶ。

element.scrollIntoView

function scrollIntoViewOf(hash) {
	var element = document.getElementById(hash);
	if(element === null) {
		return;
	}
	element.scrollIntoView();
}

もちろんinnerHTMLなどで非同期で取得した要素に切り替えた後に呼ばないとスクロールしない。しかし、切り替えた要素にimg要素が含まれている場合、img要素のsrc属性は非同期で呼ばれるため、正しい位置にスクロールしてくれない。画像が読み込まれる前と読み込まれた後では要素の高さが違うためである。つまり、画像が全て読み込まれた後にscrollIntoViewを呼び出す必要がある。そこで、前回の記事で紹介した「全ての画像を読み込んでから処理を実行するimagesLoadListener」が使える。

function scrollIntoViewOf(hash, imagesLoadListener, replacedElement) {
	var element = document.getElementById(hash);
	if(element === null) {
		return;
	}
	imagesLoadListener(replacedElement, function() {
		element.scrollIntoView();
	});
}

これで正しい位置までスクロールしてくれるはずだ。