« ドラッグ中の画面更新カクカク防止 | トップページ | デイ・アフター・トゥモロー »

2012.01.25

ブログでウィンドウのリサイズイベント利用する

ブラウザのサイズが変更されたときにテーブルの幅を広げて表示する必要が生じまして、単純にwindow.onresize=function(){ ... }とやってもよかったのですが、「既にwindow.resizeが設定されてたらどーしよー」的な心配をしてみた(心配性w)。せっかくなので、それこそ需要がないかもですけど、複数のハンドラーを登録できるようにしてみました。これってブログで使いやすいかも。ウィンドウのサイズ変更を利用する複数の記事が同時に表示されても、全部正しく動作しますから。ま、それほど需要は高くないだろうけど(笑)

jQueryの$(function(){})や、dojoのdojo.addOnLoad(function(){})と考え方は同じですが、ソフトウェア割り込み(死語?)のフックみたいで懐かしいねw。

/**
 * ウィンドウリサイズイベントハンドラーを登録
 * @param ウィンドウリサイズ時に呼び出して
 *            欲しい関数
 */
function addOnResize(f) {
    addOnResize.handlers.push(f);
}

//イベントハンドラーの配列
addOnResize.handlers = [];

//既に設定されていれば登録する
if(window.onresize != undefined) {
    addOnResize(window.onresize);
}

//イベントハンドラを設定
//配列に保存されている関数を順番に呼び出す
//(jQuery.each使っていますがforでも問題あり
//ません)
window.onresize = function() {
    jQuery.each(
        addOnResize.handlers,
        function(i,f) {
            try{
                //ハンドラ中でthisはwindow
                f.call(window);
            } catch(e) {
                alert(e + ' in ' + f);
            }
        }
    );
}

呼び出しはこちら。ウィンドウ内部のサイズ取得のサンプルもかねて。

addOnResize(function() {

  //内部の幅と高さを取得(ピクセル単位)
  var innerWidth = window.innerWidth ||
      document.documentElement.clientWidth;
  var innerHeight = window.innerHeight ||
      document.documentElement.clientHeight;

   /*あんなことやこんなこと*/

});

IEではウィンドウ内部のサイズはdocument.documentElementclientWidthclientHeightから取り出すんですね。画面サイズに従ってレイアウトを変更する処理を書いていたんだけど、高さを得るのにdocument.body.clientHeightを使っていて、ドキュメントのサイズが無限拡張してびびった(笑)

リサイズイベントも山ほどやってきますので、doLater 使えばよいかもかも。

« ドラッグ中の画面更新カクカク防止 | トップページ | デイ・アフター・トゥモロー »

プログラミング」カテゴリの記事

javascript / jQuery」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック


この記事へのトラックバック一覧です: ブログでウィンドウのリサイズイベント利用する:

« ドラッグ中の画面更新カクカク防止 | トップページ | デイ・アフター・トゥモロー »

2020年7月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
フォト

Google AdSense

銀の弾丸

無料ブログはココログ

他のアカウント