iOS9 以下 Safariでjavascriptがちゃんと動かない時にチェックしたい項目

目次

PCとスマフォ両方に対応したWebサイトを作る際、PCやiOS10以上、Androidだと問題ないのに、iOS9以下だと正常にJavascriptが動かないことがあります。 意外と知られてないですが、Javascriptのmethodの書き方や、細かな部分でiOS9以下のSafariではちゃんと動かない場合があります。 そんな時下記の項目をチェックしてみて下さい。僕はこれで数時間ハマりました。



Date関数

文字列型(String)からDate型に変換する際、文字列のフォーマットに注意する

new Date("yyyy-mm-dd")

普通に問題なさそうなのですが、iOS9のSafariだと、「invalid date」が帰ってきてしまいます。

new Date("yyyy/mm/dd")

-には対応しておらず、/でなくては行けません。

methodの初期値

Methodの定義にて、引数の初期値を設定しておきたい場合がありますが、これはiOS9のSafariだとNGです。

function methodA(param = array())

こういう初期値の設定のあるmethodを定義するとエラーになりますので、避けましょう。

iframe使用時、子から親の取得

子から親の要素を操作したい時、

window.parent.document

と指定すると直近の親が取得できますが、iOSのSafariだとちゃんと動かないときがありました。

window.top.document

を使うと取れました。これはもともと一番上の親を取得しますが、あしからず。

clickイベント

クリックイベントを発火させるためには、クリックできる要素でなくてはなりません。

a, bottom

などの要素に対してclickイベントを発火させましょう。他のブラウザの場合はdivやspan等なんでも発火しますがしてくれません。 でもどうしても、divなどでイベントを発火させたいときは、

css で下記を定義する

.element {
  cursor:pointer;
}

もしくは、clickイベントの定義に

$("#element").click(function(){
  .....
}).css('cursor','pointer');

と追加する

それでもだめな場合は、

$("大本要素").on("click touchstart", "要素指定", function(){
  .........
}).css('cursor','pointer');

とすると、聞くようになりました。

他にも見つけたら追加していきます。

なおiOS10以降は上記の問題は解消されてるっぽいです。

U-chan ( Nobuyuki Ukai )

学生時代は建築やデザインを専攻していたが、Yahoo!Japanにエンジニアとして運良く入社し、2年半で波情報を配信する波伝説に転職。3年後、Yahoo!時代の先輩の立ち上げたベンチャーに転職。数年後、伊豆下田に移住し、ゲストハウスを開業しながらリモートでエンジニアを続けたが、焼肉店の開業とともに株式会社UKAIを立ち上げ、法人成り。その後、カフェとゲストハウスをもう一軒開業し、現在は焼肉店、カフェ、ゲストハウス2件目を運営。今季は自社Webサイトの立ち上げ予定!

comments powered by Disqus