Javascript ITかあさん

ITかあさん

localStrageの より正確な対応チェック

localStrageの正確な対応チェック

localStraeの対応はIEでは、8からとなっています。IE7以前ではlocaStrageは非対応ということになり、対応か、非対応かで処理を分ける必要があります。

さらに、バージョンがIE8でもデフォルトでインターネットオプションに『DOMストレージ』が有効になっていないと動作します。

つまりlocalStrageの対応チェックは

・DOMストレージが有効になっているか
・そもそもブラウザがlocalStrageか

この2つをチェックしてあげる必要があります。

そんなわけでかあさんは以下のスクリプトを実行しました。

localStrage対応チェックのサンプルコード

 //Javascriptエラーを非表示
function TigilError() {
  return true;
  }
  window.onerror = TigilError;
  $(function(){
  //localStrageの対応チェック 
  if(('localStorage' in window) && window['localStorage'] !== null){
  //localStrage対応なら、テストでストレージをセット
  localStorage.setItem('test', 'test'); 
  //テストでセットしたlocalStorageを変数として定義
  var test = localStorage.getItem('test'); 
  }
//Javascript版issetはたったこれだけ
//対応ならid→hogeに対してテキスと追加
if(test){
  $("#hoge").append('対応');
  }else{
  $("#hoge").append('非対応');
  }

解説

一説にはif(localStorage){}だけでもよいのですが、IE7ではlocalStorageと書いた時点で未対応ですからエラーがが返ってしまいますね。

そこで完全未対応ブラウザのためにあらかじめエラーを非表示にし、
対応ならばlocalStrageにtestをセットし、後は変数化したtestがセットされているか、されていないかで判定を行います。

IE8、9、では対応と表示され、IE7 では非対応となりました。

なお、インターネットオプションのDOMストレージのチェックが入っていない場合は『非対応』の表示が確認でき、より正確にlocalStorageの判定が取れました。

InternetExplorerでJSONのエラーが出たら

JSON×IEトラブルシューティング
こんにちわ。ここ半月ほどJSON、Cookie、localStrageと無限ループの格闘を続けるITかあさんです。
JSONはIE7でも対応しているし、IE9にいたっては対応していないはずないのになぜかJSONのこんなエラーで悩まされることがあります。(半日悩まされました・・・)
JSONエラー
私の場合、他のブラウザでは全く問題なく、さらにIETesterのIE8では出なかったのに、なぜかIE9ではこのエラーが出てしまいました。
また、JSONを使うのがPHPなのか、Javascriptなのかでも対応方法が違いますので合わせて紹介したいと思います。

そもそも『JSONは定義されていません』のエラーの原因は?

IEではヘッダに

Contet-Type: application/json; charset=UTF-8

と、書いてあげないといけないそうです。
Content-typeの宣言をしてあげなければIEでは正常に動かないそうです。

で、これHTMLで書くのかな?とも思ってしばらく試したのですがダメでした。

PHP

PHPでJSONを扱う場合には以下のようにheaderで最初に実行してあげます。
『最初』ですよ。

header(“Content-Type: text/javascript; charset=utf-8”);

Javascript

すみません、Javascriptなんですが、『これだ!』という解決方法にはめぐり合えませんでしたが、以下のjson.jsというプラグインを読み込んであげてからJavascriptによるJSONを実行してあげれば問題なくJSONをIEで扱えることが確認出来ました。
なお、現在json.jsはjson2.jsの新しいものがあるのでそちらを使って下さい。

その他JSONを扱う際はこんなことにも注意

Javascriptの連想配列の最後にカンマ

Javascriptの連想配列の最後にカンマがあるとIEではエラーになってしまいます。

var hash = {
foo: "hoge",
bar: "fuga"    // カンマ入れちゃダメ!
};

jQueryは新しめのをチョイス

jQueryの古いバージョン1.4以前とかでエラーになるケースも。新しめのをチョイスしましょう。

今日のまとめ

JSONのエラーは大概このContet-Typeの問題であることが多いようです。PHPの場合はheader一発ですが、Javascriptベースの場合はjson.jsのプラグインに頼るのがよさげです。