 ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] ウィンドウサイズ取得
|
・サイトマップ [Shift-S] |
 |
■ ウィンドウサイズ取得：kl_windowwidth/height()
ウィンドウのメニューバー等を除いた「表示エリア」の大きさを取得します。
//----------------------------
//kl_windowwidth/height(outer)
//返り値：ウィンドウの大きさ(表示エリア)
//outer：真の場合はスクロールバー分も含める
// 偽なら含めず(算出不可の場合はinnerWidthで代替)
//----------------------------
function kl_windowwidth(outer){
if(outer){
if(kl_dbody().offsetWidth) return kl_dbody().offsetWidth;
if(self.innerWidth) return self.innerWidth;
}
if(kl_dbody().clientWidth) return kl_dbody().clientWidth;
if(self.innerWidth) return self.innerWidth;
return 0;
}
function kl_windowheight(outer){
if(outer){
if(kl_dbody().offsetHeight) return kl_dbody().offsetHeight;
if(self.innerHeight) return self.innerHeight;
}
if(kl_dbody().clientHeight) return kl_dbody().clientHeight;
if(self.innerHeight) return self.innerHeight;
return 0;
}
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<a href='javascript:void(0)' onclick='alert(kl_windowwidth()+","+kl_windowheight());'>スクロールバー除いたサイズ</a>
<a href='javascript:void(0)' onclick='alert(kl_windowwidth(1)+","+kl_windowheight(1));'>スクロールバー含めたサイズ</a>
【ウィンドウ表示エリア】
//----------------------------
//kl_windowwidth/height(outer)
//返り値：ウィンドウの大きさ(表示エリア)
//outer：真の場合はスクロールバー分も含める
// 偽なら含めず(算出不可の場合はinnerWidthで代替)
//----------------------------
function kl_windowwidth(outer){
if(outer){
if(kl_dbody().offsetWidth) return kl_dbody().offsetWidth;
if(self.innerWidth) return self.innerWidth;
}
if(kl_dbody().clientWidth) return kl_dbody().clientWidth;
if(self.innerWidth) return self.innerWidth;
return 0;
}
function kl_windowheight(outer){
if(outer){
if(kl_dbody().offsetHeight) return kl_dbody().offsetHeight;
if(self.innerHeight) return self.innerHeight;
}
if(kl_dbody().clientHeight) return kl_dbody().clientHeight;
if(self.innerHeight) return self.innerHeight;
return 0;
}
kl_windowheight()は「R/F、U/J」によるページ単位のスクロールで
移動量の算出に使われています。
kl_dbody()とは。。。
IE6ではスタイルシートが標準モードの場合 「document.body」の代わりに「document.documentElement」を使う必要が ある為、この関数で被せています。
参考：IE6の標準モードと「document.body」属性 (「スクロール位置取得：kl_slx/y() 」内)
IE6ではスタイルシートが標準モードの場合 「document.body」の代わりに「document.documentElement」を使う必要が ある為、この関数で被せています。
参考：IE6の標準モードと「document.body」属性 (「スクロール位置取得：kl_slx/y() 」内)
【kl_windowwidth/height()を使ったサンプル】
<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<a href='javascript:void(0)' onclick='alert(kl_windowwidth()+","+kl_windowheight());'>スクロールバー除いたサイズ</a>
<a href='javascript:void(0)' onclick='alert(kl_windowwidth(1)+","+kl_windowheight(1));'>スクロールバー含めたサイズ</a>
ウィンドウ全体のサイズを取得したい場合、 Netscape4,6+,Safari,Opera6限定ですが 「window.outerWidth/outerHeight」が使えます。
参考：
IEでは該当する属性がありません。
Window上部のメニューバーやツールバーの大きさが固定されていれば
積算して算出できそうですが
ユーザの好みによって変更されている可能性があるため正確な値を算出できません。
ウィンドウの位置については 「window.screenLeft/screenTop」(WinIE5+)、 「window.screenX/screenY」(Mozilla)が使えます。
IEでは表示エリアについて。
例えばフレームを使ったページでは各フレームの位置になる。
Mozilla系,Safariでは何れの場合もウィンドウ全体の外側左上角。
|
【JavaScript@Keynavi.Net ：
ウィンドウ編
】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。
|
| トップへ戻る [1] | Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印] |
|
|
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ
[1] ウィンドウサイズ取得
|
・サイトマップ [Shift-S] |