2010-04-28 8 views
6

J'ai quelques pages dynamiques et je veux modifier certains éléments avant que la page a pleinement rendu.où est le meilleur endroit pour placer un extrait javascript pour modifier le DOM d'une page avant qu'elle ne rend

Mon extrait est quelque chose comme

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

Je n'ai pas accès à changer le côté serveur de contenu.

Où est le meilleur endroit pour mettre l'extrait pour avoir le code exécuté avant la page, il a rendu?

Au contraire, met le javascript soit dans la tête (dans le cas de window.onload?) Ou avant que le corps de fermeture (non à l'intérieur d'un écouteur d'événement) optimal?

Répondre

0

AFAIK vous ne pouvez pas le faire. Car avant qu'une page ne soit rendue, il n'y aura aucun élément et vous ne pourrez pas accéder aux éléments qui n'ont pas été chargés dans l'arborescence DOM.

2

Je crains que vous êtes très peu probable de pouvoir exécuter votre script avant que la page rend. Bien sûr, vous pouvez placer un script en ligne et l'utiliser document.write (...) à l'endroit où vous souhaitez afficher votre contenu, mais c'est une solution horrible. Orherwise le meilleur que vous pouvez faire est à l'événement « DOM Ready », bien qu'il soit difficile de le faire sur tous les navigateurs toujours, vous avez vraiment besoin d'une bibliothèque d'abstraire les détails. jQuery fournit sa méthode prête à déclencher un événement lorsque le DOM est prêt, plutôt que lorsque la page et toutes les ressources sont chargées.

1

Depuis le navigateur rend généralement des éléments immédiatement après avoir été analysé la meilleure façon serait faire lieu le code dans un élément script directement après l'élément référencé:

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

Pas sûr que je comprends bien votre problème, mais si vous utilisez un écouteur d'événement dans la tête (tel que $(document).ready() de jQuery), vous pourrez modifier l'élément une fois la structure dom chargée en passant votre extrait à la fonction (handler) appelée lorsque l'événement se déclenche.

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

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

    <SCRIPT> 

</HEAD> 

En utilisant core javascript vous devrez bifurquer vos écouteurs d'événement pour mozilla (W3C) et les spécifications d'événements d'Internet Explorer. Il y a beaucoup de documentation sur la façon de le faire sur Internet. De toute façon, la meilleure chose à faire dans ce cas est évidemment de créer le contenu vous-même, sans le modifier après le rendu.

0

Si vous ne voulez pas afficher d'éléments avant de modifier le DOM, vous pouvez définir CSS display: none sur l'élément de corps, puis le remplacer par display: block une fois que vous avez terminé.