グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

以前も引っかかったことのある問題なので、忘れないよう書いておこうと思います。

JavaScriptでユーザーエージェントを取得してSafariを判別したい場合、
以下のようになります。
※2018.7.11 コメントでEdgeの件ご指摘いただいたので追記しました
※2016.9.9 ソースの括弧が多かったので修正しました

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1){
// ここにSafari用の記述
}

一見正しそうですが、実はこれだと問題が・・。
Google Chromeのユーザーエージェントを見てみます。

例）
Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36

そこにはSafariの文字が！
ですので上記の振り分けだと、Chromeまで対象になってしまいます。
Safariのみを対象にする場合はChromeを除外して、

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1){
// ここにSafari用の記述
}

とすることで実装できます。


※2018.7.11 追記
さらにEdgeにも Safari の文字が入っているとご指摘いただきました。ありがとうございます。

■Microsoft Edge のユーザーエージェント
mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/64.0.3282.140 Safari/537.36 edge/17.17134

入っています・・。
chrome とも入っているので結果的に chrome 用の記述が効いていますが、
念の為 Edge も追加しましよう。

var ua = window.navigator.userAgent.toLowerCase();

if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1 && ua.indexOf('edge') === -1){
// ここにSafari用の記述
}

これでOKです。

詳しく調べていないのでメモ書き程度ですが、
Android 4.Xのデフォルトブラウザで遭遇した現象について。
INFOBAR A02だけの問題という可能性もあります。


・ページ読み込み時に $(window).height() でウインドウの高さを取得しようとした

・$(function(){ ... }); で取得すると、実際の高さからアドレスバーを引いたくらいの
　高さが取得される

・$(window).bind('load', function(){ ... }); で取得すると正しい高さが取得できる


Android 2.Xでは1つ目の記述で大丈夫でした。

setIntervalに記述した処理は、指定した秒数後に初めて実行されますが、開始時にすぐさま実行させたい場合があると思います。
今までは関数にしておいてsetIntervalと同時に呼び出したりしていましたが（大した手間ではないので）、やっぱり余計な記述はないほうが良いので調べてみました。

setInterval((function hoge() {
  // ここに処理を記述
  return hoge;
}()), 1000);

上記のように書くことで即時実行させることができます。

ソースは下記のサイト様より。
arguments.callee についても書かれていて参考になりました。

setIntervalをaruguments.calleeを使わずに0秒でも発火させる

あるページAからfancyBoxのようなモーダルウィンドウを開いたままページBに移動した後、
ブラウザの戻るボタンでページAに戻ったところ、モーダルウィンドウが開いたままになっていました。
SafariとFirefoxで起こるようです。

下記のサイトで詳しくまとめられていました。

SafariとFirefoxでブラウザバック（戻るボタン）を押した際、前のページの画面効果残っている件ついてを解説

JS等のスクリプトの実行状況をキャッシュしてしまうそうです。
<header>内に下記の記述をすることで解決できます。

■通常の記述
<script type="text/javascript">
window.onunload = function(){};
</script>


■jQueryを利用した場合
<script type="text/javascript">
$(window).bind("unload",function(){});
</script>

$(document).ready(fn)の実行はCSSが読み込まれた後。
と思い込んでいましたが、実はそんなことはなかったようです。

普通にスタイルシートでページをレイアウトし、
$(document).ready(fn)で要素の位置を取得するようなJavaScriptを書いたのですが、
どうもスタイルが当たる前の位置を取得してしまうようでした。

この時点で
$(document).ready(fn)が実行される ＝ DOMの準備が出来ている ＝ CSSの読み込みも終わっている
という思い込みをしていたのでハマってしまったのですが、
記述の順番次第でCSSの読み込み前にJSが実行されてしまうようです。

英語ですが、こちらのやり取りの中で解説されています。
http://stackoverflow.com/questions/1324568/is-document-ready-also-css-ready

CSSの読み込みはJSの読み込みより先に記述しないと保証されないようです。

<link rel="stylesheet" type="text/css" href="aaaaa.css" />
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="bbbbb.js">

この順番であれば大丈夫です！