web-dev-qa-db-fra.com

Événement JavaScript window.onload non déclenché

J'ai le code suivant sur un site Web:

 window.onload = resize;
 window.onresize = resize;

 function resize(){
  heightWithoutHeader = (window.innerHeight - 85) + "px"; 
  document.getElementById("main-table").style.height = heightWithoutHeader;
  document.getElementById("navigation").style.height = heightWithoutHeader;
 }

onresize fonctionne bien, mais l'événement onload ne se déclenche jamais. Je l'ai essayé dans Firefox et Chrome et aucun d'eux ne fonctionne.

Merci pour votre aide et allez pour la réputation! ;RÉ

javascriptonloadonload-event
38
user321068

Je pense que ce qui se passe probablement ici, c'est que votre window.onload Est remplacé plus tard, assurez-vous que ce n'est pas via des choses comme <body onload="">

Vous pouvez vérifier cela par alert(window.onload) dans votre fonction de redimensionnement, pour voir ce qui y est réellement attaché.

73
Nick Craver

Je l'ai fait lorsque j'ai ajouté le code jQuery tiers dont nous avions besoin pour un partenaire. J'aurais pu facilement convertir mon window.onload désuet en un document jQuery prêt. Cela dit, je voulais savoir s'il existe une solution moderne compatible avec tous les navigateurs.

Il y a!

window.addEventListener ? 
window.addEventListener("load",yourFunction,false) : 
window.attachEvent && window.attachEvent("onload",yourFunction);

Sachez que je sais que je peux convertir mon code pour utiliser la route jQuery. Et, je vais demander à notre partenaire de refactoriser son code afin qu'il cesse d'affecter les sites.

Source où j'ai trouvé le correctif -> http://ckon.wordpress.com/2008/07/25/stop-using-windowonload-in-javascript/

24
Allen Hurff

Déplacez la ligne window.onload à la fin du fichier javascript ou après la fonction initiale et cela fonctionnera:

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("main-table").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.onload = resize;
window.onresize = resize;

Mais c'est une meilleure pratique si vous ne remplacez pas aussi la surcharge. Attachez plutôt votre fonction à l'événement onload:

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("main-table").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}
// ...
// at the end of the file...
window.addEventListener ? 
    window.addEventListener("load",resize,false) 
    : 
    window.attachEvent && window.attachEvent("onload",resize);

Cela a fonctionné pour moi et désolé pour mon anglais.

2
august0490

Cela fonctionne pour moi, je pense que votre problème est ailleurs:

 function resize(){
  var tester = document.getElementById("tester"),
      html = tester.innerHTML

  tester.innerHTML = html + "resize <br />"
 }  

window.onload = resize;
window.onresize = resize;

vous pouvez le tester vous-même ici: http://jsfiddle.net/Dzpeg/2/

êtes-vous sûr que c'est le seul événement appelé onLoad? Peut-être qu'un autre événement onLoad crée un conflit

1
meo

Cela fonctionnera lorsque vous appelez le "window.onload" à côté de la fonction resize ()

0
Prabhu M

Pour moi, window.onload ne fonctionnait pas lors de l'écriture à l'intérieur script type="text/javascript tag.

Au lieu de cela, il fallait écrire la même chose dans script language="Javascript" type="text/javascript tag et cela a bien fonctionné.

0
theUltimateWinner