スポンサーサイト

  • 2016.11.28 Monday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

一定期間更新がないため広告を表示しています


にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。
  • 2016.11.28 Monday
  • -
  • -
  • -
  • -
  • by スポンサードリンク

特定のブラウザで画面が真っ白に

ウェブサイトを作ると、ブラウザによってレイアウトが異なる、ということはよくある話だ。
代表的なブラウザだけでも、Internet Explore、Firefox、Safari、Google Chrome、Operaとあり、ブラウザによって余白などの考え方や、値を指定しない場合の標準値が異なるためである。

さらには、Internet Exploreはバージョンによってもレイアウトが異なったりする。私が作成したとあるサイトは、Internet Explore 6、Internet Explore 7、Internet Explore 8でそれぞれ余白が微妙に違う。どうも、画像をリンクにすると、こちらで意図しない余白ができるみたいで・・・

しかし、ブラウザによって画面が真っ白になるというのは、初めてきいた。あるサイトが、Firefoxではまったく表示されない、というのだ。ブラウザを認識して、Firefoxからのアクセスであれば真っ白になるようにわざわざしているならともかくとして、どうやらそういう状況ではなさそうだ。
そこで、そのサイトを見せてもらうことに。まずはGoogle Chromeで表示。今はあまり推奨されていないフレームを使って、画面を3分割しているサイトであった。レイアウトがずれているとのことだが、とにかく表示されていた。

次に、Firefox。確かに真っ白だ。そんなことあるのか???ソースを表示してみたところ、ソースは正常に見ることができた。ってことは、HTMLのコーディングに問題があるということ。

パッと目についたのが、1行目の宣言文。フレームを使っているので、本来であればFramesetを指定して

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

とするところが、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

と通常のTransitionalになっていた。そのときは、これじゃないの?とアドバイスしてしまったけれど、

あとで調べてみると、Firefoxでもそこまで厳密に宣言文は見ていないようだ。宣言文がTransitionalになっていても、中身がFramsetならFramesetとみなして表示してくれる。

それではいったい・・・?と思って、もう一度よく見てみると、</head>と<frameset>のあいだに、アクセス解析のコードが入っている。ひょっとして・・・と思って、このコードを外してみると、正常に表示された。

どうやら、JavaScriptのコードが入っていること自体ではなく、JavaScriptのコードが実行された結果のHTMLが挿入されるときに悪さをしていたようだ。本来、</head>と<frameset>のあいだにHTMLのコードが入ることは、あり得ないですからね。

確かに、各アクセス解析の設置方法やよくある質問にも、フレームに設置する場合は面倒な手法が必要になったり、コードを書く場所が変わったりする、などの特別な注意が書いてある。

というわけで、アクセシビリティ等の観点からフレームの使用は推奨されていないけれど、アクセス解析という意味でもフレームは使わないほうがよい、ということになるようだ。

にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。

スポンサーサイト

  • 2016.11.28 Monday
  • -
  • 00:26
  • -
  • -
  • -
  • by スポンサードリンク

にほんブログ村 IT技術ブログ Webサイト構築へ 人気ブログランキングへ←ランキング参加中!クリックしてもらえると嬉しいです。
  • 2016.11.28 Monday
  • -
  • 00:26
  • -
  • -
  • -
  • by スポンサードリンク
<< 2009年5月の人気記事ランキング(2009-06-01 14:53:00) | 外付けハードディスクを購入しました(2009-06-07 01:54:00) >>
コメント
コメントする









この記事のトラックバックURL
トラックバック
お友達・パートナーリンク
登録されたブログから、最新記事10件を表示しています
Powered By 画RSS
その他リンク
Twitter
Facebook
Koji Minewaki

バナーを作成
Skype
Skype Me™!
なかのひと
あわせて読みたい
あわせて読みたいブログパーツ
recommend
recommend
sponsored links
powered
無料ブログ作成サービス JUGEM
プロフィール
プロフィール写真
⇒プロフィール
最近のコメント
最近のトラックバック
最新記事
カテゴリー
アーカイブ
カレンダー
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< May 2020 >>
このブログ内を検索
others
mobile
qrcode