趣味は車輪の再発明♪

これで使える!DIV.ONLOAD



DIV要素のonloadで処理ができるようにするスクリプトのご紹介。

普通、DIVのonloadって呼ばれないですよね。 呼ばれるような気がするんだけど、残念ながら呼ばれない。

でもね、ふと利用したいことがあるわけですよ。 ページ読み込み時に特定の要素を初期設定したい時などです。

一度しか使わないようなIDを設定して、ページ読み込み時に(ソース上で)遥か遠くのSCRIPTからゲットエレメントバイネームなどして要素を参照して・・・ なあーんてヤヤコシイことをするより、<div onload='this.したいこと云々();'で一発なのに・・・。

とはいえムリなのですから、自分でやります。 簡単に言ってしまえば、ページロード時にonload属性が設定されている要素を検索して呼び出せばよいのです。 jQueryなら簡単ですよ。


javascriptのソースファイル:[allonload.js]

以下のスクリプトを(jQueryの後に)読み込んで、任意の要素のonloadにjavascriptを書いておけばOK。 そんなに大げさなことをしているわけではありませんね。探して呼び出しているだけです。

$(function() {
  //HTML的にonload属性に対応している要素名の配列
  var STD_ONLOAD_TAGS = [
        'BODY', 'APPLET', 'EMBED', 'FRAMESET',
        'IMG', 'LINK', 'SCRIPT', 'STYLE'];
  //onload属性がつけられた要素を選択
  $('[onload]').each(function(){
    //もともとonload属性が無い要素だけを処理する。
    if($.inArray(this.tagName, STD_ONLOAD_TAGS) < 0) {
      //onloadハンドラを取り出す
      var f = $(this).attr('onload');
      //タイプがfunctionならそのまま呼び出す。そうでないなら
      //文字列と仮定してevalする無名関数を定義して呼び出す。
      if(typeof(f) == 'function') {
        f.call(this);
      } else {
        (function() {eval(f);}).call(this);
      }
    }
  });
});

サンプル

このページのフッタ部分ではjQueryのバージョンを表示するために以下のようにしています。小気味よく便利!

jQuery version <span onload="$(this).text($().jquery);"></span>


RSS Feed Widget
これで使える!DIV.ONLOAD
(http://bicycle.life.coocan.jp/takamints/index.php/techtips/divOnload)
by Koji Takami ( email: vzg03566@gmail.com, GitHub: takamin )