javascript - ページ DOM がロードされたときに通知を受け取る (ただし、window.onload の前)

Question

ページ本文が読み込まれたときに通知を受け取る方法がいくつかあることは知っていますが ( window.onloadイベントを発生させるすべての画像とサードパーティのリソースが読み込まれる前に)、ブラウザーごとに異なります。

すべてのブラウザでこれを行う決定的な方法はありますか?

これまでのところ、私は知っています：

DOMContentLoaded : Mozilla、Opera 9、および最新の WebKit で。これには、イベントにリスナーを追加することが含まれます。

document.addEventListener( "DOMContentLoaded", [初期化関数], false );
Deferred script : IE では、@defer 属性を持つ SCRIPT タグを発行できます。これは、BODY タグを閉じた後にのみ確実に読み込まれます。
ポーリング: 他のブラウザではポーリングを続けることができますが、ポーリングする標準的なものさえありますか? または各ブラウザで異なることを行う必要がありますか?

document.write や外部ファイルを使わずに行けるようにしたいです。

これは、jQuery を介して簡単に実行できます。

$(document).ready(function() { ... })

しかし、私は JS ライブラリを作成していて、jQuery が常にそこにあるとは期待できません。

score 8 · Accepted Answer

DOMの準備ができたことを確認するためのクロスブラウザー方式はありません。これが、jQueryのようなライブラリーが存在する理由であり、厄介な非互換性を少しだけ抽象化します。

Mozilla、Opera、および最新のWebKitがこのDOMContentLoadedイベントをサポートしています。IEとSafariには、ウィンドウのスクロールやスタイルシートのチェックなどの奇妙なハックが必要です。残酷な詳細はjQueryのbindReady()関数に含まれています。

score 3 · Accepted Answer

コンパクトな自己完結型ソリューションを示すこのページを見つけました。すべてのブラウザで動作するようで、その方法について説明があります。

http://www.kryogenix.org/days/2007/09/26/shortloaded

score 2 · Accepted Answer

jQuery のようなライブラリを使用すると、ブラウザーの不整合に何時間も費やす必要がなくなります。

この場合、jQueryを使用すると、次のことができます

$(document).ready ( function () {
    //your code here
});

興味がある場合は、ソースを見てそれがどのように行われているかを確認できますが、ライブラリの作成者がすべての面倒な作業を行ったときに、誰もこの車輪を再発明するべきではないと思います。

score 2 · Accepted Answer

YUI はこれを行うために 3 つのテストを使用します。Firefox と最近の WebKit では、発生する DOMContentLoaded イベントがあります。古い Safari では、document.readyState は「ロード済み」または「完了」になるまで監視していました。IE の場合、HTML <P> タグが作成され、「doScroll()」メソッドが呼び出されます。これは、DOM の準備ができていない場合にエラーになります。YAHOO.util.Eventのソースは、 YUI 固有のコードを示しています。Event.js で「doScroll」を検索します。

score 1 · Accepted Answer

関連するコードを jQuery から取り出してください。John Resig は、この問題に関するほとんどの基礎を既に jQuery でカバーしています。

score 0 · Accepted Answer

なぜこれではないのですか？

<body>  
  <!-- various content -->  
  <script type="text/javascript">  
  <!--  
    myInit();  
  -->
  </script>  
</body>

私が物事を正しく理解していれば、myInitは、ブラウザがページでヒットするとすぐに実行されます。これは、本文の最後のものです。

score 0 · Accepted Answer

あなたが探している素晴らしいクロスブラウザソリューションは....存在しません... (大勢の人が「ああああ....」と言っている音を想像してみてください)。

DomContentLoadedは、ベストショットです。pollingIE-oldiesのテクニックはまだ必要です。

addEventListener を使用してみてください。
利用できない場合 (明らかに IE)、フレームを確認します。
フレームでない場合は、エラーがスローされなくなるまでスクロールします (ポーリング)。
フレームの場合は、IE イベント document.onreadystatechange; を使用します。
サポートされていないその他のブラウザーの場合は、古い document.onload イベントを使用してください。

すべてのブラウザーをカバーするために使用できるjavascript.infoで次のコードサンプルを見つけました。

function bindReady(handler){

    var called = false

    function ready() { 
        if (called) return
        called = true
        handler()
    }

    if ( document.addEventListener ) { // native event
        document.addEventListener( "DOMContentLoaded", ready, false )
    } else if ( document.attachEvent ) {  // IE

        try {
            var isFrame = window.frameElement != null
        } catch(e) {}

        // IE, the document is not inside a frame
        if ( document.documentElement.doScroll && !isFrame ) {
            function tryScroll(){
                if (called) return
                try {
                    document.documentElement.doScroll("left")
                    ready()
                } catch(e) {
                    setTimeout(tryScroll, 10)
                }
            }
            tryScroll()
        }

        // IE, the document is inside a frame
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                ready()
            }
        })
    }

    // Old browsers
    if (window.addEventListener)
        window.addEventListener('load', ready, false)
    else if (window.attachEvent)
        window.attachEvent('onload', ready)
    else {
        var fn = window.onload // very old browser, copy old onload
        window.onload = function() { // replace by new onload and call the old one
            fn && fn()
            ready()
        }
    }
}

score -2 · Accepted Answer

setTimeout の使用は非常にうまく機能しますが、いつ実行されるかはブラウザー次第です。タイムアウト時間としてゼロを渡すと、ブラウザは「解決」したときに実行されます。

これの良いところは、それらの多くを持つことができ、onLoad イベントの連鎖について心配する必要がないことです。

setTimeout(myFunction, 0);
setTimeout(anotherFunction, 0);
setTimeout(function(){ doSomething ...}, 0);

等

これらはすべて、ドキュメントの読み込みが終了したときに実行されます。ドキュメントの読み込み後に設定した場合は、スクリプトの実行が終了した後に実行されます。

それらが実行される順序は決定されておらず、ブラウザー間で変わる可能性があります。したがって、たとえばmyFunction前に実行されることを期待することはできません。anotherFunction

score -2 · Accepted Answer

-2

これはかなりうまくいきます：

setTimeout(MyInitFunction, 0);

于 2008-09-15T18:35:11.223 に答える

javascript - ページ DOM がロードされたときに通知を受け取る (ただし、window.onload の前)

9 に答える 9

Related

Reference