2013年2月15日金曜日

pushStateに対応しているかを調べるスクリプト

Ajaxを使ったページを開発している時に、履歴を残す必要が出てきたのでpushStateに関して色々とテストしてましたが。
どうもスマホでは対応状況がバラバラみたいだということに気がつきました。
そこで、とりあえず手軽にpushStateに対応しているかどうかを確認するためのスクリプトをメモしておきます。

$(document).ready(function() {
 if ('pushState' in history){
  alert(1);
  location.hash = "#good";
 } else {
  alert(2);
  location.hash = "#bad";
 }
});

困ったことに、Androidの標準ブラウザはpushStateに対する対応状態がバラバラみたいです。
今のところ、Ajaxを使いながら履歴を残す処理をするなら、ブラウザ別に処理を分けた方がいいように感じます。

2013年1月29日火曜日

IE7以前のブラウザでJSONを配列に分離する

Ajaxを使ったサイトでは、取得したデータを受け取るときにはJSON形式にして送信元に結果を返すことが多いと思います。
IE8以降や一般的なモダンブラウザならこれといった問題は生じないのですが。
このJSON形式を配列に分離する際に、IE7以前で分離できない問題にハマってしまいました。

問い合わせたJSONを配列にパースする


var obj = JSON.parse(responceText);

Ajaxで問い合わせて返却されたデータが、JSON形式にエンコードした状態でresponceText変数に格納されていると仮定します。
この記述は、IE8以上のIE、一般的なモダンブラウザ(Chrome/Firefox/Safari)で問題なくデータを配列に分離できました。

ところが、この記述はIE7以前ではJavascriptエラーとなってしまいます。
エラーコンソールによると、JSONに関するメソッドがそもそも実装されていない模様。
このままではせっかく返却されたデータを表示することができません。

IE7以前にはjson2.jsを使用する

IE7とJSON.parse()について検索をしていると、こちらのサイトに辿り着きました。

json2.jsのススメ
JSON.parse(); に渡す文字列に / (バックスラッシュ) が入っていたら SyntaxError に。

両者とも、JSONの分離にevalは使わない方がいいことを説明しているページのようです。
どちらにも登場するのがjson2.jsなのですが。
単純に解釈するなら、json2.jsはJSON.parse()メソッドを利用できないブラウザでJSON.parse()メソッドを利用できるようにするライブラリのようです。
このライブラリは、JSONを扱うページにインポートしておくだけで機能するようです。

<!--[if lte IE 7]>
<script src="json2.js" type="text/javascript"></script>
<![endif]-->

例では条件分岐コメントでIE7以前に適用できるようにしてます。
json2.jsはGitHubでシェアされているようなので、そちらからダウンロードして自分のサーバーにアップロードすることで使えました。

json2.jsダウンロード(GitHub)