2010-04-28 25 views
6

Birkaç dinamik sayfaya sahibim ve sayfa tamamlanmadan önce bazı öğeleri değiştirmek istiyorum.Bir sayfanın DOM değerini değiştirmeden önce javascript snippet'i yerleştirmek için en iyi yer nerede

Benim pasajı ben içerik sunucusu tarafı değiştirmeye erişimi olmayan

document.body.getElementById("change").innerHTML = "<img src..."; 

gibi bir şeydir.

Kod parçacığının, oluşturduğu sayfadan önce kodun çalışmasını sağlamak için en iyi yer nerede?

Daha ziyade, javascript'i HEAD (window.onload olayı içinde?) Veya kapatmadan önce BODY'ye (bir olay dinleyicisinin içinde değil) en uygun hale getiriyor mu?

cevap

0

AFAIK bunu yapamazsınız. Bir sayfa oluşturulmadan önce hiçbir öğe olmayacak ve DOM ağacına yüklenmemiş öğelere erişemezsiniz.

2

Korkarım ki, sayfa oluşturulmadan önce komut dosyanızı yürütme olasılığınız çok düşük. Satır içi bir komut dosyası yerleştirebildiğinizden ve içeriğinizi görüntülemek için istediğiniz yerde document.write (...) kullanabildiğinizden emin olun, ancak bu korkunç bir çözümdür. Orherwise yapabileceğiniz en iyi 'DOM Ready' etkinliğidir, ancak tüm tarayıcılarda tutarlı bir şekilde yapılabilmesi zor olsa da, ayrıntıları belirtmek için gerçekten bir kütüphaneye ihtiyacınız vardır. jQuery, sayfanın ve tüm kaynakların yüklenmesi bittiğinde değil, DOM hazır olduğunda bir olayı tetiklemek için hazır bir yöntem sunar.

1

onlar en iyi yolu doğrudan başvurulan öğeden sonra yerde bir script elemanı kodu yapmak olurdu çözümlenen sonra, derhal tarayıcı genellikle elemanları vermektedir beri:

<div id="change"></div> 
<script type="text/javascript"> 
    document.body.getElementById("change").innerHTML = "<img src..."; 
</script> 
1

emin değilim Sorununuzu anlıyorum doğru, ancak kafanın içinde bir olay dinleyicisi kullanırsanız (jQuery's $(document).ready() gibi), etkinliğin gerçekleşmesi sırasında kod parçacığınızı (handler) çağrılan işlevine geçirerek dom yapısı yüklendikten sonra öğeyi değiştirebileceksiniz. Eğer mozilla (W3C) ve internet explorer olay spesifikasyonları için olay dinleyicileri çatal zorunda kalacak javascript

<HEAD> 
    //... 
    <SCRIPT type="text/javascript"> 

     $(document).ready(function() { 
      $("#change").append(
       $("<img src=\"...\">") 
      ) ; 
     }) ; 

    <SCRIPT> 

</HEAD> 

kullanma çekirdek. İnternette nasıl yapılacağına dair bir sürü belge var.

Her iki durumda da, bu durumda yapılacak en iyi şey, içeriği kendiniz oluşturmak, post prodüksiyonunu değiştirmek değil.

0

DOM değişiklikleri yapmadan önce herhangi bir öğe oluşturmak istemiyorsanız, gövde öğesinde CSS display: none ayarını yapabilir ve işiniz bittikten sonra display: block olarak değiştirebilirsiniz.