SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 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	//クライアントの横幅

 clientHeightclientWidthは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要素から取得した値も同じ値となる。
JavaScriptのプロパティの値もDOMのbody要素から取得した値も同じ値となる。

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
DOM属性を使ってbody要素から値を取得する時の注意

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
クロスブラウザスクリプトの作成テクニック連載記事一覧

もっと読む

この記事の著者

半場 方人(ハンバ マサヒト)

Netscape2.XでJavaScriptに初めて出合ったころ、「なぜJavaScriptの日本語の書籍が無いんだ」、とあちこちで嘆いていたら、じゃあおまえが書け、とお声がかかり、JavaScript関連の書籍を執筆するようになる。執筆に際していつも考えるのは、「JavaScript初心者だった頃の気持ちを忘れないよに」、ということ。主な著書は、「標準Webデザイン講座 JavaScript&Ajax」(翔泳社)などがある。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3065 2008/10/16 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング