Posted at

JSでブラウザ毎にメソッドが対応しているかを判定して条件分岐をする

暗号化に使えるCrypto.subtleを例にとってみる。最近のブラウザであれば crypto.subtle が使えるが、httpだと動かないし、IEは部分対応となっている。

crypto.subtleが使える場合と使えない場合で処理を分ける場合にどのようにやるのか調べてみた。


typeofで判定をする

http,httpsのページで実行をしてみればわかるが、typeofで判定をすればそのブラウザで使用できるのかどうかがわかるため、条件分岐ができる。

if (typeof crypto.subtle === 'object') {

// ブラウザでcrypto.subtleが使えるので、そのまま
crypto.subtle.importKey();
} else {
// 何かしら他の処理をする
}

chromeのhttpsのサイトで実行してみた結果

typeof crypto.subtle

"object"

chromeのhttpのサイトで実行してみた結果

typeof crypto.subtle

"undefined"