Tamam, bu sadece aptalca bir soru olabilir, ancak zaman zaman aynı soruyu soran birçok insan olduğundan eminim. Ben sadece her halükarda %100 emin olmak istiyorum. jQuery ile hepimiz harika
$('document').ready(function(){});
Ancak, diyelim ki standart JavaScript ile yazılmış ve arkasında herhangi bir kütüphane bulunmayan bir fonksiyonu çalıştırmak istiyorum ve bu fonksiyonu sayfa hazır olur olmaz başlatmak istiyorum. Buna yaklaşmanın doğru yolu nedir?
Yapabileceğimi biliyorum:
window.onload="myFunction()";
...ya da body
etiketini kullanabilirim:
<body onload="myFunction()">
...ya da her şeyden sonra sayfanın en altında deneyebilirim, ancak body
veya html
etiketinin sonu gibi:
<script type="text/javascript">
myFunction();
</script>
Bir veya daha fazla fonksiyonu jQuery'nin $.ready()
fonksiyonuna benzer bir şekilde yayınlamanın tarayıcılar arası (eski/yeni) uyumlu yöntemi nedir?
Tüm çapraz tarayıcı uyumluluğunu sizin için yapan bir framework olmadığında yapılacak en basit şey, gövdenin sonuna kodunuza bir çağrı koymaktır. Bu işlem bir onload
işleyicisinden daha hızlıdır çünkü bu işlem tüm görüntülerin yüklenmesini değil yalnızca DOM'un hazır olmasını bekler. Ve bu her tarayıcıda çalışır.
<!doctype html>
<html>
<head>
</head>
<body>
Your HTML here
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
})();
</script>
</body>
</html>
Modern tarayıcılar için (IE9 ve daha yeni sürümler ile Chrome, Firefox veya Safari'nin herhangi bir sürümü), herhangi bir yerden çağırabileceğiniz $(document).ready()
gibi bir jQuery yöntemi uygulayabilmek istiyorsanız (çağıran kodun nerede konumlandırıldığı konusunda endişelenmeden), bunun gibi bir şey kullanabilirsiniz:
function docReady(fn) {
// see if DOM is already available
if (document.readyState === "complete" || document.readyState === "interactive") {
// call on next available tick
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
}
Kullanım:
docReady(function() {
// DOM is loaded and ready for manipulation here
});
Eğer tam bir çapraz tarayıcı uyumluluğuna ihtiyacınız varsa (IE'nin eski sürümleri de dahil) ve window.onload
metodunu beklemek istemiyorsanız, jQuery gibi bir framework'ün $(document).ready()
metodunu nasıl uyguladığına bakmalısınız. Tarayıcının özelliklerine bağlı olarak oldukça karmaşıktır.
Size jQuery'nin ne yaptığı hakkında küçük bir fikir vermek için (script etiketi nereye yerleştirilirse yerleştirilsin çalışacaktır).
Destekleniyorsa, standardı dener:
document.addEventListener('DOMContentLoaded', fn, false);
bir geri dönüş ile:
window.addEventListener('load', fn, false )
veya IE'nin eski sürümleri için kullanır:
document.attachEvent("onreadystatechange", fn);
bir geri dönüş ile:
window.attachEvent("onload", fn);
Ve, IE kod yolunda tam olarak takip edemediğim bazı geçici çözümler var, ancak çerçevelerle ilgili bir şey var gibi görünüyor.
İşte jQuery'nin düz javascript ile yazılmış .ready()
işlevinin tam bir alternatifi:
(function(funcName, baseObj) {
// The public function name defaults to window.docReady
// but you can pass in your own object and own function name and those will be used
// if you want to put them in a different namespace
funcName = funcName || "docReady";
baseObj = baseObj || window;
var readyList = [];
var readyFired = false;
var readyEventHandlersInstalled = false;
// call this when the document is ready
// this function protects itself against being called more than once
function ready() {
if (!readyFired) {
// this must be set to true before we start calling callbacks
readyFired = true;
for (var i = 0; i < readyList.length; i++) {
// if a callback here happens to add new ready handlers,
// the docReady() function will see that it already fired
// and will schedule the callback to run right after
// this event loop finishes so all handlers will still execute
// in order and no new ones will be added to the readyList
// while we are processing the list
readyList[i].fn.call(window, readyList[i].ctx);
}
// allow any closures held by these functions to free
readyList = [];
}
}
function readyStateChange() {
if ( document.readyState === "complete" ) {
ready();
}
}
// This is the one public interface
// docReady(fn, context);
// the context argument is optional - if present, it will be passed
// as an argument to the callback
baseObj[funcName] = function(callback, context) {
if (typeof callback !== "function") {
throw new TypeError("callback for docReady(fn) must be a function");
}
// if ready has already fired, then just schedule the callback
// to fire asynchronously, but right away
if (readyFired) {
setTimeout(function() {callback(context);}, 1);
return;
} else {
// add the function and context to the list
readyList.push({fn: callback, ctx: context});
}
// if document already ready to go, schedule the ready function to run
if (document.readyState === "complete") {
setTimeout(ready, 1);
} else if (!readyEventHandlersInstalled) {
// otherwise if we don't have event handlers installed, install them
if (document.addEventListener) {
// first choice is DOMContentLoaded event
document.addEventListener("DOMContentLoaded", ready, false);
// backup is window load event
window.addEventListener("load", ready, false);
} else {
// must be IE
document.attachEvent("onreadystatechange", readyStateChange);
window.attachEvent("onload", ready);
}
readyEventHandlersInstalled = true;
}
}
})("docReady", window);
Kodun en son sürümü GitHub'da https://github.com/jfriend00/docReady adresinde herkese açık olarak paylaşılmaktadır.
Kullanım:
// pass a function reference
docReady(fn);
// use an anonymous function
docReady(function() {
// code here
});
// pass a function reference and a context
// the context will be passed to the function as the first argument
docReady(fn, context);
// use an anonymous function with a context
docReady(function(context) {
// code here that can use the context argument that was passed to docReady
}, ctx);
Bu test edilmiştir:
IE6 and up
Firefox 3.6 and up
Chrome 14 and up
Safari 5.1 and up
Opera 11.6 and up
Multiple iOS devices
Multiple Android devices
Çalışma uygulaması ve test yatağı:
İşte nasıl çalıştığına dair bir özet:
docReady(fn, context)
ilan edinçağrıldığında, ready işleyicisinin zaten ateşlenip ateşlenmediğini kontrol edin. Eğer öyleyse,
setTimeout(fn, 1)` ile JS'nin bu iş parçacığı bittikten hemen sonra yeni eklenen geri aramayı ateşlemek için zamanlayın.varsa, hem
"DOMContentLoaded"hem de
"load"olayları için
.addEventListener()` kullanarak olay işleyicileri yükleyin. "load" güvenlik için yedek bir olaydır ve gerekli olmamalıdır.mevcut değilse,
"onreadystatechange"ve
"onload"olayları için
.attachEvent()` kullanarak olay işleyicileri yükleyin.olayında,
document.readyState === "complete"` olup olmadığını kontrol edin ve eğer öyleyse, tüm hazır işleyicileri ateşlemek için bir fonksiyon çağırın.docReady()` ile kaydedilen işleyicilerin kaydedildikleri sırayla çalıştırılacağı garanti edilir.
Belge zaten hazır olduktan sonra docReady(fn)
çağrısı yaparsanız, geri arama setTimeout(fn, 1)
kullanılarak geçerli yürütme iş parçacığı tamamlanır tamamlanmaz yürütülecek şekilde zamanlanacaktır. Bu, çağıran kodun, daha sonra JS'nin mevcut iş parçacığı biter bitmez olsa bile, bunların her zaman daha sonra çağrılacak asenkron geri aramalar olduğunu varsaymasını sağlar ve çağrı sırasını korur.
Sizin yönteminiz (betiği kapanış gövde etiketinden önce yerleştirmek)
<script>
myFunction()
</script>
</body>
</html>
eski ve yeni tarayıcıları desteklemek için güvenilir bir yoldur.