onload処理について（7/7）

サンプルソース

xhtml（このファイルのソース）

<html>
<head>
〜
<script type="text/javascript" src="/sample/onload6.js"></script>
〜
</head>
<body>
〜
<p id="test">〜</p>
〜
</body>
</html>
  1. 外部JS「onload7.js」を読み込む

onload7.js（このファイルが読み込んでいる外部JS）

function prepareOnloadFunction(func){
  var oldonload = window.onload;
  if(typeof window.onload != 'function'){
    window.onload = func;
    }else{
    window.onload = function(){
      oldonload();
      func();
      }
    }
 }

function test(){
  var test = document.getElementById("test");
  var testTxt = document.createTextNode("これはテストです。");
  test.appendChild(testTxt);
  }
prepareOnloadFunction(test);

function test2(){
  var test = document.getElementById("test");
  var testTxt = document.createTextNode("これはテスト2です。");
  test.appendChild(testTxt);
  }
prepareOnloadFunction(test2);

prepareOnloadFunction(func)

この関数は、ファイル読み込み後に処理をしたい関数を実行します。詳細は、DOM Scriptingを利用する上で知っておくべきことの節「使い方」以降を参照してください。

test()

  1. このJSファイルを参照しているファイル（=現在開いているxhtmlファイル）内のid属性「test」を抽出
  2. 「これはテストです。」というテキストを生成
  3. id属性「test」内にテキスト「これはテストです。」を入れる

prepareOnloadFunction(test);

ファイルを読み込み後に関数「test」を実行する

test2()

  1. このJSファイルを参照しているファイル（=現在開いているxhtmlファイル）内のid属性「test」を抽出
  2. 「これはテスト2です。」というテキストを生成
  3. id属性「test」内にテキスト「これはテスト2です。」を入れる

prepareOnloadFunction(test2);

ファイルを読み込み後に関数「test2」を実行する

上記のサンプルソースを使用して、ファイル読み込み後にDOM Scriptingで生成されるテキスト

それでは、本題「DOM Scriptingを利用する上で知っておくべきこと」に戻ります。

DOM Scriptingを利用する上で知っておくべきこと