読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

jQuery resizeとGoogle Chromeの翻訳バーでサイズが変わりまくってハマった

jQuery

スポンサードリンク

最近JavaScriptjQueryを勉強しました。
まだリファレンスには弱いですが、構文は読めるようになりました。
※無名関数とか難しかった。

で、またハマりました。毎回ハマっているので
そろそろ「ハマりのアイパー隊長」とか呼ばれそうです。

windowsサイズ(ブラウザの画面サイズ)の変更をキャッチする処理が必要になった。
すべてはここからはじまった。。。


さて、今回はjQueryを使って、「ブラウザのサイズが変わったら
サイトをリロードする」って処理を追加しようと思い、下記を追加しました。

  • 追加した記述
$(window).resize(function() {
	location.reload();
}

jQueryのメソッドresize()はブラウザのウィンドウサイズがかわったら
イベントをキャッチし、内部の処理を実行します。

で、やってみたところ

お?おお?
おおおおおおおおおおおおおおおおおおおおおおおおおおおお!!!???
(°Д° )


ブラウザがリロードしまくって固まるという自体に。


色々調べた結果、どうやらこれはいけない書き方らしい。
resize()はちょっとサイズを変更しただけでも動作する。
そのため、普通にブラウザのサイズを変更した場合は
キャッチする回数が大変なことになるらしい。

と、いうわけで、さっきの記載方法はNGで
次は下記記述に直しました。

var timer = false;
$(window).resize(function() {
	if (timer !== false) {
        clearTimeout(timer);
	}
    timer = setTimeout(function() {
        console.log('resized');
        location.reload();
    }, 200);

どうやらみなさんもresize()を使うとき
一度は経験することなのか
Webの情報はほとんど上の書き方だったので
そんなには困りませんでした。


大変だったのはこのあとでした。


上記に書きなおしたあと実行。
お?できたかも!

と、喜びもつかの間
リロード1秒後に

あれ?リロードした?
あれ?あれれれれれ??????

ここからリロードの嵐が始まる!!
無限ループや!!

もちろん私はブラウザのサイズなんて変えていません。
(´・ω・)?
ずっとこんな顔しながらデバッグしてみました。

事象をまとめてみると・・・
・ブラウザのサイズ変える動きはしていないが
先程記述の関数が実行される。
・リロード1〜2秒後に実行される。
・ちなみにブラウザはGoogle Chrome


そして、ひとつの答えがでてきました。
Google Chromeの翻訳バーでした

うーんと、なんでこういうことになったか
めっちゃ単純な話。

リロード後

f:id:aipacommander:20140511091351p:plain

リロード1秒後

f:id:aipacommander:20140511091346p:plain

お分かり頂けただろうか?
翻訳バーが上からでてくると、どうやらウィンドウサイズが変わるようです。

(°Д°)ジーザス

ちなみに、回避方法はいまいちわかりません。
ということはlocation.reload()は使えないということですね。 orz