جافا سكريبت domready?
https://stackoverflow.com/questions/1206937
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
وأنا أعلم أنني يمكن استخدام أطر مختلفة مثل نموذج أو مسج إرفاق وظيفة النافذة.onload ، ولكن ليس هذا ما أنا أبحث عنه.
أنا بحاجة إلى شيء من هذا القبيل .readyState لدرجة أنني يمكن أن تفعل شيئا مثل هذا:
if(document.isReady){
var id = document.getElem ...
}
هل هناك أي طريقة أخرى من استخدام ما أطر تفعل ؟
المحلول
لقد تحديث قانون 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;
}
})()
نصائح أخرى
تحرير: سنة 2018 يأتي علينا ، أعتقد أنه من الآمن أن الاستماع DOMContentLoaded هذا الحدث.
function fireOnReady() { /* ... */ }
if (document.readyState === 'complete') {
fireOnReady();
} else {
document.addEventListener("DOMContentLoaded", fireOnReady);
}
يرجى ملاحظة أن هذا الحدث إلا النار مرة واحدة عند تحميل الصفحة الخاصة بك!إذا كان لديك لدعم حقا المتصفحات القديمة ، ثم تحقق من السوبر خفيفة الوزن النصي لقد وضعت أدناه.
عن المرجعية التاريخية فقط:
مسج لديه غير الشرعيين خاصية تسمى isReady التي يتم استخدامها داخليا لتحديد ما إذا كان دوم استعداد الحدث قد أطلقت:
if($.isReady) {
// DOM is ready
} else {
// DOM is not yet ready
}
بدأت في 1.5.2 عاد بقدر 1.3.2 مكان الإقامة هناك.في حين لا يحملون وثائق, وأود أن أقول أنه يمكنك الاعتماد على هذه الخاصية في الإصدارات المستقبلية من مسج.تحرير: وبعد عام واحد - v1.7.2, أنها لا تزال تستخدم $.isReady - لا تزال غير موثقة ، لذا يرجى استخدام على مسؤوليتك الخاصة.كن حذرا عند الترقية.
تحرير: v1.9, أنها لا تزال تستخدم $.isReady - لا تزال غير موثقة
تحرير: v2.0 مع كل من "الكبرى" التغييرات لا يزال يستخدم $.isReady - لا تزال غير موثقة
تحرير: v3.x لا يزال يستخدم $.isReady - لا تزال غير موثقة
تحرير: كما وقد أشار العديد من الناس, سبق لا حقا الإجابة على هذا السؤال.لذلك أنا فقط إنشاء ميني دوم استعداد مقتطف التي كانت مستوحاة من داستن دياز حتى أصغر دوم استعداد مقتطف.داستن خلق أنيق طريقة للتحقق من الوثيقة readyState مع شيء مشابه لهذا:
if( !/in/.test(document.readyState) ) {
// document is ready
} else {
// document is NOT ready
}
السبب في هذا هو أن المتصفح 3 تحميل الدول:"تحميل", "التفاعلية" ، و "كاملة" (كبار السن بكت أيضا استخدام "تحميل", ولكن لم يكن لديك ما يدعو للقلق حول أي أكثر).ستلاحظ أن كلا من "تحميل" و "التفاعلية" تحتوي على النص "في"...حتى إذا كانت السلسلة "في" وجدت داخل document.readyState, ثم نحن نعلم أننا لسنا جاهزين بعد.
وبينما أنا عادة الدعوة تجنب استخدام الأطر الا للضرورة، وانا اقول باستخدام أحد في هذه الحالة على ما يرام تماما. وهنا مسج:
$(function () {
// do stuff after DOM has loaded
});
لاحظ أنه ليس هو نفسه كما حدث window.onload، منذ onload ينفذ لأول مرة بعد أن تم تحميل الموارد الأخرى (صور الخ) رمز كنت في بلدي على سبيل المثال سيتم تنفيذ عندما DOM انتهاء التحميل، اي عند هيكل HTML كامل متاح (وليس بالضرورة عندما الصور، CSS، الخ هو متاح.)
إذا كنت ترغب في متغير قابلة للتحديد، يمكنك تعيين واحد في وظيفة جاهزة:
var documentIsReady = false;
$(function () { documentIsReady = true; });
وبالطبع يمكنك أن تجد أكثر المكتبات خفيفة الوزن من مسج إذا كان كل ما تريد القيام به هو للتحقق من DOM جاهزة. ولكن استخدام مكتبة في الحالات التي تتصرف بشكل مختلف المتصفحات مختلفة جدا (هذا هو واحد من هذه الحالات).
<ع> استخدام بعض الرموز من 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;
};
ولم يتم اختباره، ولكن ينبغي لها أن تعمل. I تبسيطه من DOMAssistant، لأن DOMAssistant يسمح الاسترجاعات متعددة وفحص للتأكد من أنك لا يمكنك إضافة نفس الوظيفة مرتين الخ.
في 5 سنوات التي مرت منذ سئل هذا السؤال DOMContentLoaded أصبح حدثا عالميا مدعومة، ويمكنك فقط استخدام ذلك.
document.addEventListener('DOMContentLoaded', function() {
//.. do stuff ..
}, false);
وتحقق من هذا العرض من مايكروسوفت. -> http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html وهنا هو جوهر من التعليمات البرمجية التي تسمح لك بتشغيل JS على DOM جاهزة ...
(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);
}
} ());
وهنا بعض من مصدر جافا سكريبت لالتجريبي .. http://ie.microsoft.com/testdrive/Includes/Script/ReturnAndShareControls.js
وكان يعمل بشكل جيد. لطيف !! .. على جوجل كروم وإنترنت إكسبلورر 9.
document.addEventListener("DOMContentLoaded", function(e){
console.log("dom ready");//output to web browser console
});
ولا مسج اللازمة لذلك. ليست هناك حاجة لتمرير المعلمة 3RD على DOMContentLoaded لأن هذا الحدث ليس له الأم لاجتياز هذا الحدث. أيضا لا حاجة للحصول على كل نزوة مع ما الجميع يقول. هذا وسوف اقول لكم متى DOM هو محملة بالكامل وجاهزة للاستخدام. I LOLed عندما لاحظت مساعد ليب DOM. أن تحرر لا طائل منه على الاطلاق.
ويتم تشغيل الحدث DOMContentLoaded عندما المستند تم تحميله بشكل كامل وتحليل، دون انتظار الأنماط والصور والأطر الفرعية لإنهاء تحميل
وaddEventListener() هي وظيفة عظيمة لفحص أي حال بما في ذلك DOM وضع استعداد. عند استخدام "DOMContentLoaded" ليست هناك حاجة المعلمة 3rd في addEventListener() لأن هذا الزناد لا يوجد لديه العنصر الرئيسي لتمرير الحدث أيضا. في بلدي على سبيل المثال أعلاه ستلاحظ المعلمة 2ND هي وظيفة غير معروفة. يمكنك أيضا تمرير اسم وظيفة في المعلمة 2ND.
document.addEventListener([(string)event trigger], [function],[(boolean)traverse DOM tree]);
والمزايا الأخرى لاستخدام هذا على مسج لهذا لن كسر عند تحديث مسج.
ومسج لا تستخدم window.onload.
و$(document).ready() ينتظر حتى تحميل DOM ويمكن اجتيازه (قد أو قد لا يتم تحميل باقي المحتوى عن طريق هذه النقطة).
إذا سحب ما يصل إلى مصدر للمسج والفرز من خلال الفوضى، ستجد يتم العمل من خلال طريقة bindReady() التي لديها عدة تطبيقات مختلفة لمختلف المتصفحات وفقط عندما تكون كافة هذه التطبيقات تفشل فإنه يرتد على الاستماع للحدث الحمل لالنافذة.
وهذا هو في الواقع واحدة من أكبر الأسباب معظم الناس استخدام أطر مثل مسج لأن الحل لهذا هو لا يتفق عبر المتصفحات.
