web-dev-qa-db-ja.com

javascript domready？

プロトタイプやjqueryなどのさまざまなフレームワークを使用してwindow.onloadに関数をアタッチできることは知っていますが、私が探しているものではありません。

次のようなことができるように、.readyStateのようなものが必要です。

if(document.isReady){
  var id = document.getElem ...
}

フレームワークの機能を使用する以外の方法はありますか？

javascriptjavascript-events
51
kristian nissen

DOMAssistantライブラリ のコードを更新しました。

var domReady = (function (){
  var arrDomReadyCallBacks = [] ;
  function excuteDomReadyCallBacks(){
       for (var i=0; i < arrDomReadyCallBacks.length; i++) {
         arrDomReadyCallBacks[i]();
       }
       arrDomReadyCallBacks = [] ;
  }

  return function (callback){
    arrDomReadyCallBacks.Push(callback);
     /* Mozilla, Chrome, Opera */
      if (document.addEventListener ) {
          document.addEventListener('DOMContentLoaded', excuteDomReadyCallBacks, false);
      }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        browserTypeSet = true ;
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                //callback();
                excuteDomReadyCallBacks();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */

    window.onload = excuteDomReadyCallBacks;
}
})()
8
Yehia

Edit：2018年が来ると、 DOMContentLoaded イベント。

function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
    fireOnReady();
} else {
    document.addEventListener("DOMContentLoaded", fireOnReady);
}

イベントは、ページが読み込まれたときにonceのみ発生することに注意してください！本当に古いブラウザをサポートする必要がある場合は、以下にまとめた超軽量スクリプトをご覧ください。

歴史的参照のみ：

jQueryにはisReadyと呼ばれる文書化されていないプロパティがあり、DOM readyイベントが発生したかどうかを決定するために内部的に使用されます。

if($.isReady) {
    // DOM is ready
} else {
    // DOM is not yet ready
}

私は1.5.2から始めて1.3.2まで戻り、プロパティはそこにあります。文書化されていませんが、jQueryの将来のバージョンではこのプロパティに依存できると言えます。 Edit：そして1年後-v1.7.2、まだ$.isReadyを使用しています-まだ文書化されていないので、自己責任で使用してください。アップグレード時には注意してください。

Edit：v1.9、まだ$.isReadyを使用-まだ文書化されていない

Edit：v2.0、すべての「主要な」変更、まだ$.isReadyを使用-まだ文書化されていない

Edit：v3.xは引き続き$.isReadyを使用します-まだ文書化されていません

編集：数人が指摘したように、上記は実際に質問に答えません。だから、Dustin Diazの さらに小さなDOMレディスニペット に触発された ミニDOMレディスニペット を作成しました。ダスティンは、これに類似した何かでドキュメントreadyStateをチェックするためのきちんとした方法を作成しました：

if( !/in/.test(document.readyState) ) {
    // document is ready
} else {
    // document is NOT ready
}

これが機能する理由は、ブラウザに「読み込み中」、「インタラクティブ」、「完了」の3つの読み込み状態があるためです（以前のWebKitも「読み込み済み」を使用しましたが、それ以上心配する必要はありません）。 「loading」と「interactive」の両方に「in」というテキストが含まれていることに気づくでしょう。したがって、文字列「in」がdocument.readyState内で見つかった場合、まだ準備ができていないことがわかります。

42
Ryan Wheale

私は通常、必要でない限りフレームワークの使用を避けることを推奨しますが、この場合はフレームワークを使用することは完全に問題ないと思います。 jQueryは次のとおりです。

$(function () {
    // do stuff after DOM has loaded
});

onloadは他のリソース（イメージなど）がロードされた後に最初に実行されるため、window.onloadイベントとは異なることに注意してください。この例で使用したコードはDOMが終了すると実行されます読み込み、つまり完全なHTML構造が利用可能な場合（必ずしも画像、CSSなどが利用可能な場合ではありません。）

チェック可能な変数が必要な場合は、ready-functionで変数を設定できます。

var documentIsReady = false;
$(function () { documentIsReady = true; });

もちろん、DOM対応を確認するだけであれば、jQueryよりも軽量なライブラリを見つけることができます。ただし、異なるブラウザが非常に異なる動作をする場合にはライブラリを使用します（これはそのような場合の1つです）。

DOMAssistantライブラリ のコードを使用して、独自の「DOMの準備ができた」関数を作成するのはそれほど難しくないはずです。

var domLoaded = function (callback) {
    /* Internet Explorer */
    /*@cc_on
    @if (@_win32 || @_win64)
        document.write('<script id="ieScriptLoad" defer src="//:"><\/script>');
        document.getElementById('ieScriptLoad').onreadystatechange = function() {
            if (this.readyState == 'complete') {
                callback();
            }
        };
    @end @*/
    /* Mozilla, Chrome, Opera */
    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback, false);
    }
    /* Safari, iCab, Konqueror */
    if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {
        var DOMLoadTimer = setInterval(function () {
            if (/loaded|complete/i.test(document.readyState)) {
                callback();
                clearInterval(DOMLoadTimer);
            }
        }, 10);
    }
    /* Other web browsers */
    window.onload = callback;
};

テストされていませんが、動作するはずです。 DOMAssistantは複数のコールバックを許可し、同じ関数を2回追加できないようにチェックするため、DOMAssistantから単純化しました。

32
Blixt

この質問が尋ねられてから5年が経ち、DOMContentLoadedは普遍的にサポートされるイベントになりました。あなたはそれを使うことができます。

document.addEventListener('DOMContentLoaded', function() {
    //.. do stuff ..
}, false);
29
Damon Smith
_document.addEventListener("DOMContentLoaded", function(e){
    console.log("dom ready");//output to web browser console
});
_

これにはJQueryは必要ありません。このイベントにはイベントをトラバースする親がないため、DOMContentLoadedで3番目のパラメーターを渡す必要はありません。また、他の皆が言っていることですべてを空想する必要はありません。これにより、DOMが完全にロードされて使用準備が整ったことがわかります。 DOMアシスタントライブラリに気づいたとき、私は大喜びしました。そのライブラリは絶対に役に立ちません。

DOMContentLoadedイベントは、スタイルシート、画像、サブフレームの読み込みが完了するのを待たずに、ドキュメントが完全に読み込まれて解析されたときに発生します

addEventListener()は、DOM準備完了ステータスを含むイベントをチェックするための優れた関数です。 「DOMContentLoaded」を使用する場合、addEventListener()の3番目のパラメーターは、このトリガーにもイベントを渡す親アイテムがないため、必要ありません。上記の例では、2番目のパラメーターが匿名関数であることに気付くでしょう。関数の名前を2番目のパラメーターに渡すこともできます。

_document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]);
_

JQueryよりもこれを使用することのもう1つの利点は、JQueryを更新しても壊れないことです。

10
Patrick W. McMahon

Microsoftのこのデモをご覧ください。 -> http://ie.Microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html ここに、DOMでJSを実行できるようにするコードの要点があります...

(function () {
    function load2(){
        // put whatever you need to load on DOM ready in here
        document.getElementById("but3").addEventListener("click", doMore, false);
    }
    if (window.addEventListener) {
        window.addEventListener('DOMContentLoaded', load2, false);
    } else {
        window.attachEvent('onload', load2);
    }
} ());

デモのjavascriptソースの一部を次に示します。 http://ie.Microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js

うまくいきます。 Nice !! .. on Google Chrome and IE 9。

10
Randy Skretka

jQueryは_window.onload_を使用しません。

$(document).ready()は、DOMがロードされ、トラバースできるようになるまで待機します（コンテンツの残りの部分は、その時点でロードされる場合とされない場合があります）。

JQueryのソースをプルアップして混乱を整理すると、さまざまなブラウザー用のいくつかの異なる実装を持つbindReady()メソッドによって作業が行われ、それらの実装のすべてが失敗した場合にのみ実行されます。ウィンドウのロードイベントのリッスンにフォールバックします。

6
Justin Niessner

これは実際、ほとんどの人がjQueryのようなフレームワークを使用する最大の理由の1つです。これは、このソリューションがブラウザー間で一貫していないためです。

3
Scott Fox

これを試して：
リンク： GitHubのonDomReady または以下のソース：

if(document.ondomready == undefined) {
    document.ondomready = {};
    document.ondomready = null;
} else {
    document.ondomready=document.ondomready;
}
var oldonload=document.onload;
var isLaunched = 0;
document.onload = function() {  
    if(oldonload !== null) {
        oldonload.call();
    }
};
document.addEventListener("DOMContentLoaded", function onDom(evt) {
    var olddomready = document.ondomready;
    if(olddomready !== null) {
        if(isLaunched == 0) {
            olddomready.call(evt);
            isLaunched == 1;
            //We now launched the mapped DOMContentLoaded Event
        } else {
            //We already launched DOMContentLoaded Event
        }
    }
}, false);

私はすでにこれをOpera 11.x/12.xでテストしました。他ではまだテストしていません。

注意： まだリポジトリをアップロードしていませんが、すぐに空き時間になります。

1
dsrdakota

特定のことだけを行う小さなライブラリが必要な場合は、 microjs でライブラリを使用できます。手元の質問については、DOMStatic libs readyメソッドを使用できます。

0
Jerome Anthony