ブラウザごとのwindowオブジェクトの違いを理解する

クロスブラウザスクリプトの作成テクニック 第10回

　ブラウザの種類やバージョン、ブラウザ独自の実装の違いを考慮し、異なるブラウザで同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。最終回となる今回は、ブラウザによる「windowオブジェクト」の違いについて見ていきます。  

はじめに

　Webブラウザ（以下、ブラウザ）の種類やバージョン、各々のブラウザ独自の実装の違いを考慮し、同じように動作するスクリプトを「クロスブラウザスクリプト」と言います。ここでは、クロスブラウザスクリプトを実現する方法について、順を追って解説してきています。

　本来のJavaScriptの理想的な姿として、一つのスクリプトを書けば、JavaScriptをサポートしたブラウザであれば、同じように動くべきなのでしょう。しかし、ブラウザによって細かな実装の違いがあるため、クロスブラウザスクリプトのテクニックが必要となってきます。

　現在一般的に使われているブラウザである、Internet ExplorerやFirefox、Opera、Safariなどでは、それらのブラウザの積極的なDOMサポートのおかげで、以前ほど多くの実装の違いはなくなってきています。しかしそれでも、JavaScriptの中でも比較的よく使われているeventオブジェクトとwindowオブジェクトには、多くの実装の違いが存在します。

　その中で前回は、eventオブジェクトのブラウザによる実装の違いについて解説しました。今回は、残りのwindowオブジェクトの実装の違いについて解説していきたいと思います。

コンテンツ表示領域の取得方法

　JavaScript1.2では、ウインドウの外周やウインドウの内周、つまりウインドウ内のコンテンツ表示領域のサイズの値を取得する、次のようなプロパティが追加されました。

高さと横幅の値を持つwindowオブジェクトのプロパティ

innerHeight	//ウィンドウ内周(コンテンツ表示領域)の高さ
innerWidth	//ウィンドウ内周(コンテンツ表示領域)の横幅
outerHeight	//ウィンドウ外周の高さ
outerHeight	//ウィンドウ外周の横幅

　これらのプロパティは、JavaScript1.2に対応したブラウザの中でも、Netscape Navigator4.X以降のNetscape、Firefoxを始めとしたMozilla系ブラウザ、Opera、Safariでは対応していますが、Internet Explorerでは対応していません。しかし、コンテンツ表示領域のサイズの値に関しては、Internet Explorerでも次の用法を使えば取得することができます。

要素の高さと横幅の値を持DOM属性

document.body要素.clientHeight	//クライアントの高さ
document.body要素.clientWidth	//クライアントの横幅

　clientHeight、clientWidthはDOM属性です。このうちclientHeightは設定したHTMLタグ要素の高さの値を、clientWidthは設定したHTMLタグ要素の横幅の値をそれぞれ持っています。Internet Explorer4.X以降のInternet Explorerや、Firefoxを始めとしたNetscape6以降のMozilla系ブラウザ、Opera、Safariは、ブラウザ自身がDOM化されています。このためそれらのブラウザでは、clientHeight属性、clientWidth属性から、JavaScriptを使って値を取得することができます。つまり、body要素からJavaScriptを使ってclientHeight属性、clientWidth属性の値を取得することにより、innerHeightプロパティ、innerWidthプロパティと同じ、コンテンツ表示領域の高さと横幅の値を取得できるのです。

　次のサンプルは、JavaScriptのinnerHeightプロパティ、innerWidthプロパティとDOMのbody要素のclientHeight属性、clientWidth属性の値をそれぞれ取得し、書き出しています。

Sample/sample_1.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Sample_1</title>
<style type="text/css">
<!--
body { background-color: #ffffff; }
-->
</style>
</head>
<body>
*コンテンツ表示領域の高さ、横幅
<p>
<script type="text/javascript">
<!--
document.write("コンテンツ表示領域の高さ(innerHeight)：");
document.write(window.innerHeight);
document.write("<br>");
document.write("コンテンツ表示領域の横幅(innerWidth)：");
document.write(window.innerWidth);
//-->
</script>
</p>
<p>
<script type="text/javascript">
<!--
document.write("body要素の高さ(clientHeight)：");
document.write(document.body.clientHeight);
document.write("<br>");
document.write("body要素の横幅(clientWidth)：");
document.write(document.body.clientWidth);
//-->
</script>
</p>
</body></html>

JavaScriptのプロパティの値もDOMのbody要素から取得した値も同じ値となる。

　サンプルの実行結果を見てみると、innerHeightプロパティとclientHeight属性、innerWidthプロパティとclientWidth属性が、それぞれ同じ値になっていることが分かると思います。