タイトルがわかりにくくてすみません(^^;汗
とある謎の問題現象と、その解決策を調べていて、PrimeFacesには便利な機能があることを知ったのでメモです。
謎の問題現象
IE8だが、なぜかIE7でレンダリングされてしまう orz
こんなことがあるのか、と…原因がよくわからないです。
が、以下サイトのような情報もあって、あってもおかしくない…のかな。
PrimeFacesはユーザガイドをみるとわかりますが
となっており、3.5ではIE7が切り捨てられています(^^;
IE7でPrimeFacesの画面を見ると、IE8以降とは色々異なる(コンポのサイズとかその他色々)ので怪しく思い、何とか気づきました。
IEのF12開発者ツールでブラウザーモードをIE7でも同じ確認はできます。
ちなみに開発者ツールでブラウザーモードを変えるのは以下です。
IEのツールメニューから「F12 開発者ツール」を選択
ブラウザーモードでIE7を選択
最初にトライした内容
先に紹介したサイトにもあるようにmetaタグで以下のように追加するのがメジャーな方法のようですね。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Edgeを指定するとインストールされてるIEの最新版となるようです。
これをJSFで使うには、headタグ内で単純に以下のように書きます。
<h:head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</h:head>
また、プログラムで挿入したい場合はFilterを使って以下のような形で書けるようです。(すみません、今回試していません)
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
((HttpServletResponse) response).setHeader("X-UA-Compatible", "IE=Edge");
chain.doFilter(request, response);
}
以下ページが元ネタです。
meta http-equiv=“X-UA-Compatible” content=“IE=8” ignored in RichFaces webapp
で、前者のheadタグを試したのですが…駄目でした。
生成されたhtmlは以下のようになってしまいます。
リソースの読み込みタイミングが遅いようで、問題挙動は変わりませんでした。
成功した内容
もう少し調べていくと、以下のページがありました。
なんと、PrimeFacesではタグの中でタグの名前を指定することで、リソースの記述順番を変えられるらしい。
早速、以下に書き換え
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</f:facet>
</h:head>
実行すると、ちゃんと最新のIEでレンダリングされた！そしてチェックすると…
おお、記述が先頭に！(^^)/なんちゅう細かさ
PrimeFacesの情報は以下にありました。
facetのname属性で指定できるのは「first」「middle」「last」とあるようです。
で、順番的には
- もしfirstが定義されたfacetがあればここ
- テーマのCSS
- もしmiddleが定義されたfacetがあればここ
- PrimeFacesで定義されたCSSやJavaScript
- Headコンテンツ
- もしlastが定義されたfacetがあればここ
とのこと。
ちなみにこの記述方法はJSFの仕様ではなく、PrimeFaces独自のものとのことです。
