ブラウザをJavaScriptで判別して対処したときの備忘録

IE対策として、「CSSハックを使わずIEのバグに対処する方法 - [ホームページ作成] All About」にあるように、条件付きコメント

<!--[if 【条件式】 ]>
   (中身)
<![endif]-->

を使う手があります。では、IE以外のブラウザはどうすればよいか、調べてみましたが、どうやらhtml内の記述では難しそうです。

そのかわり、JavaScriptを使えば出来るということが分かったので、「ブラウザ判定 :JavaScript の基本コード」を参考に、ブラウザを判別するボタンを作って(コピーして)みたのがこれです↓。

ソースは

html↓

<input type="button" value="お使いのブラウザを表示します" onClick="getBrowser();" />

JavaScript↓

<script type="text/javascript">
document.getElementById("str_agent").innerHTML = window.navigator.userAgent.toLowerCase();
function getBrowser() {
	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	message1="あなたがお使いのブラウザは、\n";
	message2="です。";

	if (userAgent.indexOf("msie") > -1) {
		if (appVersion.indexOf("msie 6.0") > -1) {
			alert(message1+"IE6"+message2);
		}
		else if (appVersion.indexOf("msie 7.0") > -1) {
			alert(message1+"IE7"+message2);
		}
		else if (appVersion.indexOf("msie 8.0") > -1) {
			alert(message1+"IE8"+message2);
		}
		else {
			alert(message1+"不明"+message2);
		}
	}
	else if (userAgent.indexOf("firefox") > -1) {
		alert(message1+"Firefox"+message2);
	}
	else if (userAgent.indexOf("opera") > -1) {
		alert(message1+"Opera"+message2);
	}
	else if (userAgent.indexOf("chrome") > -1) {
		alert(message1+"Google Chrome"+message2);
	}
	else if ((userAgent.indexOf("safari") > -1) && (userAgent.indexOf("iphone") == -1)) {
		alert(message1+"Safari"+message2);
	}
	else if ((userAgent.indexOf("safari") > -1) && (userAgent.indexOf("iphone") > -1)) {
		alert(message1+"iPhoneのSafari"+message2);
	}
	else {
		alert(message1+"不明"+message2);
	}
}
</script>

ちなみに、アラート内での改行は「\n」。

 

ここで「イヌでもわかるJavaScript講座」を参考に見てみると、
「userAgent」(= window.navigator.userAgent.toLowerCase();)

「appVersion」( = window.navigator.appVersion.toLowerCase();)
という変数がポイントみたいです。中身に何入っているか見てみると、

↑のソース↓

<input type="button" value="userAgentを表示する" onClick="userAgent = window.navigator.userAgent.toLowerCase();window.alert(userAgent)">
<input type="button" value="appVersionを表示する" onClick="appVersion = window.navigator.appVersion.toLowerCase();window.alert(appVersion)">

ということで、この中にブラウザやヴァージョン情報が入っており、そのキーワードは以下の通り(追記:ソースを見れば分かると思いますが、キーワードは小文字に変換されています)。

ブラウザ userAgent内に含まれるキーワード
Internet Explorer msie
Firefox firefox
Opera opera
Google Chrome chrome
Safari safari
iPhone iphone

ってそのままなんですけど、IFE(Internet Fuckin' Explorer)の場合は特にヴァージョンが重要になって、それは「appVersion」の中に(「userAgent」にも)「msie 6.0」とか「msie 7.0」とか「msie 8.0」とある訳なんですね。

 

で、文字の検索に使うのがindexOf()【検索対象】.indexOf(【検索ワード】[,【検索開始位置】]);という書式で、検索ワードの文字位置、なければ-1を返します。

だからif (userAgent.indexOf("firefox") > -1)ならば「文字列userAgentに"firefox"という文字があれば」という意味に。

 

ということで、これを使えば特定のブラウザだけ表示が異なる場合のハックが簡単になるのですが、以下、いくつかメモっておきたいことがあるので、以前これを利用して「firefoxのテーブル内強制改行を実現させるためのjsを導入したらOperaの表示がおかしくなっちゃった(どんな風におかしくなったかは忘れた)」対策をしたときの備忘録です。

発端は、firefoxで自動改行がうまくいかないことでした。参照 → 自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。 | 乱雑モックアップ

その対策として、FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」を導入したんですが(OperaはすでにCSSだけで対応済み)、そしたらFirefox以外で不具合が。

そこで、上に書いた、ブラウザを判定するjsと、{document.write('【html文】');}を利用して以下のように書いてみたけどエラー。

{document.write('');}

調べた結果、「JavaScriptファイルの中からJavaScriptを呼び出す - 高密度商業地域」に

JavaScriptファイル内に
document.write("<\/script>");
と書けば呼び出すことができます。

とあったので、「script」の閉じタグを<\/script>としたらうまく行きました。

他のタグはそんなことしなくても良いのですが、なぜ「script」だけ「\/(エスケープコード?)」になるのかまだ理解できていません。余裕があったらまた調べてみたいと思います。

【追記】
Operaの不具合を思い出しました。「FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」」を実装させたときに、Opera内のtableのセル(行かも?)にmargin(なのかスペースなのか何なのかは未調査ですが、とにかく余白)が生じてしまうことでした。

Filed under: 未分類     12:00 AM
トラックバック

このエントリーのトラックバックURL:

コメントはまだありません »

No comments yet.

Leave a comment





(一部のHTMLタグを使うことができます。)