« タイムリミット3時間 | トップページ | PHPの文字列連結、ダブルコーテーションとシングルコーテーションの速度比較 »

2012.02.06

div.onloadの実現

通常、div.onloadは効かないので、どうにかできんかとやってみた。一応使えそうなのでご紹介。ここではソースが見にくいので「これで使える!DIV.ONLOAD|たかみんつ」に同等の処理を紹介しています。

<html>
<head>
<script type="text/javascript"
  src="../js/jquery-1.6.2.min.js"
  ></script>
<script type="text/javascript">

//body以外のonloadも使えるようにする。
$(function() {
  //onload属性を持つ要素全て
  $('[onload]').each(function(){
    //標準でonloadに対応しているエレメントは
    //処理する必要なし。
    if(!isHandleOnload(this.tagName)) {
      var f = this.onload;
      //onloadの型別に処理を呼び出す。
      if(typeof(f) == 'function') {
        f.call(this);
      } else {
        (function() {
          eval(f);
        }).call(this);
      }
    }
  });
});
//標準でonloadを処理するタグの配列とハッシュ生成
var STD_ONLOAD_TAGS = [
  'BODY', 'APPLET', 'EMBED', 'FRAMESET',
  'IMG', 'LINK', 'SCRIPT', 'STYLE'];
var STD_ONLOAD_TAG_HASH = {};
for(var i = 0; i < STD_ONLOAD_TAGS.length; i++) {
  STD_ONLOAD_TAG_HASH[STD_ONLOAD_TAGS[i]] = true;
}
//標準でonloadを処理するかどうかを判定
function isHandleOnload(tagName) {
  return STD_ONLOAD_TAG_HASH[tagName];
}
</script>
</head>
<body>
  <div onload="alert(this.innerHTML);">
    コンテンツ1</div>
  <div onload="alert(this.innerHTML);">
    コンテンツ2</div>
  <div onload="">コンテンツ3</div>
</body>
</html>

「本来onloadが動作する要素」を判定する部分がいけてないけど、DIVだけに限定すればもっと簡単になる。

呼び出しのタイミングは厳格ではないけれど必要十分かな?。FirefoxとIE9で確認したら、ベタなbody.onloadよりも先に呼ばれていた(←これはjQueryの範疇だけど、下のnon-jQuery版も同じだった)。

ページロード時だけ要素を特定して処理するとか、そういった要素にIDをつけなくてもよくなるので、それなりにすっきりする。

上のはjQueryを使う前提で書いたけど、「jQueryが無くてもかまわないだろう」と軽い気持ちでやってみたが・・・

//document.bodyが出来上がるまで待って、
//callOnLoadを呼び出す。
(function() {
  var tid = setInterval(function() {
    if(document && document.body) {
      clearInterval(tid);
      callOnLoad();
    }
  }, 1);
})();
//いわゆる配列に対するforeach
function foreach(arr, f) {
  for(var i = 0; i < arr.length; i++) {
    if(f.call(arr[i]) == false) {
      break;
    }
  }
}
//HTML要素を判定して配列を返す
function getElements(parent, judge, list) {
  list = list || [];
  var nds = parent.childNodes;
  foreach(nds, function(){
    if(judge.call(this)) {
      list.push(this);
    }
    getElements(this, judge, list);
  });
  return list;
}
//標準以外のonloadをすべて呼び出す。
function callOnLoad() {
  var onloadElements = getElements(
    document.body,
    function() {
      return !!this.onload;
    });
  foreach(
    onloadElements,
    function(){
      if(!isHandleOnload(this.tagName)) {
        var f = this.onload;
        if(typeof(f) == 'function') {
          f.call(this);
        } else {
          (function() {
            eval(f);
          }).call(this);
        }
      }
    });
};

かなり大変(当たり前か)。jQueryはありがたいね♪あるものは使わないと(^^;

ハマショー!

« タイムリミット3時間 | トップページ | PHPの文字列連結、ダブルコーテーションとシングルコーテーションの速度比較 »

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

javascript / jQuery」カテゴリの記事

コメント

コメントを書く

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

トラックバック


この記事へのトラックバック一覧です: div.onloadの実現:

« タイムリミット3時間 | トップページ | PHPの文字列連結、ダブルコーテーションとシングルコーテーションの速度比較 »

2019年5月
      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

銀の弾丸

無料ブログはココログ

他のアカウント