2010

10/12

JavaScript でロード時にコンテンツの再描画が発生しても初期状態がちら見えしないようにする方法 (HTML5 的には valid だぜ)

どうもこんにちは。

ページをロードする際に JavaScript でコンテンツの再描画が発生するような処理を行う場合、IE など一部のブラウザではスクリプト実行前の状態が一瞬表示されてから再描画される場合があります。

これって結構カッコ悪いのでどうにか出来ないか試行錯誤してみたところ、いい感じの方法が見つかったのでご紹介します。

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample</title>
<!-- 初期状態は非表示 -->
<style type="text/css">body { visibility: hidden; }</style>
<noscript>
<!-- スクリプトが無効な場合は以下の指定がカスケードされる -->
<style type="text/css">body { visibility: visible; }</style>
</noscript>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
jQuery(function($) {
	//
	// DOM の再描画が発生する処理
	//

	// スクリプトから表示状態を指定する
	$("body").css({ visibility: "visible" });
});
</script>
</head>
<body>
<h1>Sample</h1>
</body>
</html>

ポイント

毎度のことながら jQuery を使っていますが、ポイントは以下のとおり。

  1. body の初期状態を visibility: hidden にする
  2. script でコンテンツの操作終了後に body を visibility: visible に変更する
  3. JavaScript を無効にしているユーザ向けに noscript 内で visibility: visible に設定する
    • これがないと 2 が実行されないため何も表示されなくなってしまいます

残念なところ

XHTML では head 内に noscript を置くことが出来ないので invalid になってしまいます。一方 HTML5 では (今のところ) head 内の noscript には link, style, meta を格納しても良いことになっているのでこの方法が使えます。(上記コードは HTML5 Validator をきちんとパスします。) 実用志向と言われるだけありますね！

情報

2010

06/30

EZweb では form に action 属性がないと submit できない端末がある

再びこんにちは。昔ハマったけど誰も書いてなさそうだったので備忘録的に残しておきます。

<html>
<head>
  <title>フォームのテスト</title>
</head>
<body>
  <form>
    <input type="text" name="message">
    <input type="submit" value="投稿">
    <!--- ↑ form に action が指定されていないので投稿ボタンが反応しない -->
  </form>
</body>
</html>

このように action を指定していないフォームでは EZweb の端末でポストすることができません。 (弊社では W62S で確認。) 投稿ボタンを押しても無反応な感じになります。

普通は action 属性を省略することはなさそうですが、知っておくと後で役立つかもしれません。ではでは。

preload preload preload