ブラウザに応じて`window.URL.createObjectURL()`と`window.webkitURL.createObjectURL()`を使い分ける方法

かつてcreateObjectURL()は、WebKit系ブラウザ（旧版のChromeやSafariなど）ではwindow.webkitURL.createObjectURL()というベンダープレフィックス付きの実装が提供されていました。一方、標準仕様に準拠したブラウザではwindow.URL.createObjectURL()が利用できます。

このようなブラウザ間の差異を吸収するには、機能検出（フィーチャーディテクション）を行うラッパー関数を定義するのが確実な方法です。以下のように実装します。

function display(file) {
    if (window.webkitURL) {
        // WebKit系ブラウザ向けの実装
        return window.webkitURL.createObjectURL(file);
    } else if (window.URL && window.URL.createObjectURL) {
        // 標準仕様に準拠したブラウザ向けの実装
        return window.URL.createObjectURL(file);
    } else {
        // いずれもサポートしていない場合
        return null;
    }
}

この関数は、まずwindow.webkitURLの存在を確認し、あればプレフィックス付きのAPIを使用します。存在しない場合は、標準のwindow.URL.createObjectURLが利用可能かどうかをチェックします。どちらも使えない環境ではnullを返すため、呼び出し側で安全にエラー処理を行えます。

使い方

定義したラッパー関数は、次のように呼び出すだけでクロスブラウザ対応が完了します。

var url = display(file);

取得したオブジェクトURLは、例えば画像のプレビュー表示などに活用できます。

if (url) {
    var img = document.createElement('img');
    img.src = url;
    document.body.appendChild(img);
}

補足：モダンブラウザについて

現在の主要ブラウザ（Chrome、Firefox、Safari、Edgeなど）はすべて標準のwindow.URL.createObjectURL()をサポートしており、ベンダープレフィックス付きのwindow.webkitURLは非推奨となっています。そのため、最新のブラウザのみを対象とする場合は、window.URL.createObjectURL()を直接使用しても問題ありません。上記のようなラッパー関数が必要になるのは、古いブラウザへの互換性を維持したい場合です。