前の関連記事：Blogger:IE8で背景の色が消える問題(3)モバイルサイト有効にせざるを得ない
またIE8で背景がおかしくなっていることに気がつきました。前回とはまたちょっと違う症状です。
またどこででおかしくなったのかわからず、、、またひとつずつやったことを振り返る
投稿本文の部分の背景は表示されていますが周りの背景が消えています。
なぜか最上部の背景の部分は表示されています。
現在のテンプレートをテストブログに復元すると、、、症状が再現できません。
さあ、どこが原因でしょう？
テンプレートのHTMLが原因ではないとするとレイアウトにいれたHTML/JavaScriptガジェットがあやしいです。
うーん、背景だけではなく、ガジェットの位置自体がおかしいです。
左のサイドバーのラベル一覧表示のしたには関連記事一覧のガジェットが表示されるはずですが、一番下にあるはずのAttributionが表示されています。
しかもこのAtrributionはコメントアウトしてあるはずであり、カスタマイズした自動更新コピーライト入りのものが表示されていません。
なぜこのようなことが起こるのかとても不思議です。
HTML/JavaScriptガジェットを1つずつテストブログに移していくと、関連記事一覧のガジェットを表示させると症状が再現されました。
これが原因でした。これの対策を考えます。
関連記事一覧を表示させる外部JavaScriptをガジェットにいれたときだけ症状出現
これはBlogger:関連記事一覧を自動的に表示させる方法で導入したがジェットですが、Blogger:関連記事一覧を自動的に表示させるガジェットの画像のサイズを指定するでJavaScriptを圧縮しました。
これが原因でしょうか？
テストブログに圧縮前のJavaScriptを入れてみます。
直りません。JavaScriptを圧縮したのが原因ではないようです。
画像サイズの指定を入れたから？
画像サイズを入れる前のJavaScriptを入れても直りません。
外部ファイルの中身をガジェットに入れてしまったから？
→もとのように外部ファイルから読み込むようにしたらIE8での表示が直りました。
でもおかしくなったのはIE8だけなんですよね。
ChromeやFirefoxはもちろん、IE10でも問題はありませんでした。
IE8のときだけ動作を変えることにしたのに動かしていないはずのコードが悪影響
あまり深く考えるのが面倒になってきたので原因究明はせずに、対処療法でIE8のときだけは外部jsファイルを読み込むことにしました。
Blogger：ページビュー設定(7)どのブラウザでも同じ方法で設定するページを作るでやったように、IE8かどうかの判別にはtypeof window.getSelection === "function"のtrue/false判定を使います。
<script>
if(typeof window.getSelection === "function"){
;
}else{
$.getScript("http://blogger-related-posts.googlecode.com/files/jquery.related-posts-widget-2.0.min.js");
}
</script>
これでIE8では表示の問題なく関連記事の一覧が表示されるようになりました。ところが3行目にIE8以外で動かすBlogger:関連記事一覧を自動的に表示させるガジェットの画像のサイズを指定するでカスタマイズしたJavaScriptを入れるとIE8で症状再発です。
3行目にいれたJavaScriptはIE8では実行されないはずですが、なぜか最初の症状が再現してしまうのです。とても不思議でした。
実行されないコードが悪影響を及ぼすのか？と思って3行目に入れたコードを/**/でコメントアウトしてみましたが、それでも症状がでてしまいます。
コメントアウトしたコードに影響されるというのはどう対処したらよいのでしょう？
IE8ではJavaScript内の<!--がHTMLのコメントタグとして動作してしまう
とても不思議に思ったので結局原因究明することにしました。
表示がおかしくなるJavaScritpをどんどん削っていってどの部分がIE8に悪影響を与えているか調べてみました。
(/<!--\s*(\{.+\});?\s*--\>/)
ここまで削ってもだめです。さらにどんどん削っていくと<!--があると表示がおかしくなることがわかりました。
IE8では<script></script>の中にある<!--以降をHTMLのコメントアウトと判断してしまうのです。
IE10ではさすがにこれはまずいということで改善されたのでしょう。
JavaScriptのコメントとして/*<!--*/としてもだめです。
ということで<script></script>の中であってもなんとしても<!--が働かないようにしないといけません。
解決策を2通り思いつきました
最初に思いついたのは<!--があるならそれの対になる-->を作ってしまえ、ということで</script>の手前に-->とつけました。
<script> (関連記事一覧のJavaScript(途中に<!--あり）) --> </script>→大成功。これで問題なく動作しました。
<script></script>内でコメントタグを完結させたわけです。
これで解決したわけですが、通勤中に思いついたアイデアだったのですぐに動作確認ができませんでした。
そのため、続けて思考をめぐらせているとこの代替案も1つ思いつきました。
(/<!--\s*(\{.+\});?\s*--\>/)は正規表現のようですので\をいれて<!--を分断してしまえばよいのです。
正規表現（RegExp）にある 正規表現の文法を参考にさせていただくと、\の後ろに続く文字がb, B, cA, d, D, f, n, r, s, S, t, v, w, W, 数字, x以外はとくに影響がないはずです。
ということで(/<!--\s*(\{.+\});?\s*--\>/)を(/<\!--\s*(\{.+\});?\s*--\>/)としました。
これも問題なく動作しました。
この方法の方がスマートな気がしたのでこちらを採用することにしました。
参考にしたサイト
IE 9/10 未満のブラウザとそれ以外を判定する - メモ用紙
typeof window.getSelection === "function"がfalseならIE8です。
正規表現（RegExp）
文字列の操作にはとても便利な機能です。
0 件のコメント:
コメントを投稿