ページ読み込み後に処理を行う方法

ブラウザのキャッシュ (Back-Forward Cache) が働いているとき、loadイベントは発生しません。Using Firefox 1.5 caching | MDN

loadイベント

このイベントは、次の要素などでサポートされます。onload Event | W3Schools

  • <body>
  • <frame>
  • <iframe>
  • <img>
  • <input type="image">
  • <link>
  • <script>
  • <style>

window.onload

Windowオブジェクトのonloadイベントハンドラに、JavaScriptコードを登録します。

window.onload = function()
{
};

これはHTMLで、body要素のonload属性に設定することと同義です。

イベントが先に登録されていることを考慮したコード

前述の方法では先にonloadイベントが登録されていると、それを上書きして消してしまいます。よって複数のイベントが登録されることが想定されるならば、次のようにイベントを追加すべきです。

if( window.addEventListener )
{
    window.addEventListener( 'load', Func, false );
}
else if( window.attachEvent )
{
    window.attachEvent( 'onload', Func );
}
else
{
    window.onload = Func;
}

なお、これはクロスブラウザに対応したイベントの実装によるものです。

body.onload

Documentオブジェクトのbodyプロパティの属性として、

document.body.onload = function()
{
};

のように記述すると、ブラウザによって挙動が異なることがあります。よって前述のように、windowオブジェクトを用いるべきです。

DOMContentLoadedイベント

スタイルシートや画像、それにフレームの読み込み完了を待つ必要がないならば、DOMContentLoadedイベントを使用します。

document.addEventListener( 'DOMContentLoaded', function()
    {
        //
    }, false );

このイベントとloadイベントとの違いは、Internet Explorer Test Driveで確認できます。

ところでページ読み込み後にドキュメントを変更する場合、その変更の完了はsetTimeout()で0秒後に関数を呼び出すことで実現できます。

doScroll()

DOMContentLoadedが実装されていない環境 (IE9より前) 向けには、doScroll()で代用する方法があります。これはドキュメントの読み込み前にdoScroll()を呼び出すと例外が発生することを応用した方法で、例外を発生しなくなるまでdoScroll()をくり返し呼びます。IEContentLoaded - An alternative for DOMContenloaded on Internet Explorer

( function()
{
    try
    {
        document.documentElement.doScroll( 'left' );
    }
    catch( e )
    {
        // 例外が発生しなくなるまで、再帰的に呼び出す
        setTimeout( arguments.callee, 10 );
        return;
    }

    // ここで読み込み完了後の処理を行う。
} )();

クロスブラウザの実装方法

function Init()
{
    // 読み込み完了後の処理
}


if( document.addEventListener )
{
    document.addEventListener( 'DOMContentLoaded', Init, false );
}
else if( document.attachEvent )
{
    // DOMContentLoadedがサポートされない環境 (IE9より前) 向け

    var CheckReadyState = function()
    {
        if( document.readyState == 'complete' )
        {
            document.detachEvent( 'onreadystatechange', CheckReadyState );
            Init();
        }
    }
    document.attachEvent( 'onreadystatechange', CheckReadyState );

    ( function()
    {
        try
        {
            document.documentElement.doScroll( 'left' );
        }
        catch( e )
        {
            setTimeout( arguments.callee, 10 );
            return;
        }

        document.detachEvent( 'onreadystatechange', CheckReadyState );
        Init();
    } )();
}
else
{
    // attachEvent()すらもサポートされない環境 (?) 向け

    Init();
}

参考

参考

関連ページ

JavaScriptのドキュメントから検索