Quelle est la différence entre Window, Document, Screen?

Window est l’objet principal du DOM, le document object model, qui est la base de la page web et quand je dis la base ça comprend vraiment tout, les images, les scripts javascript, et autres objets, bref ce que vous voyez dans la fenêtre de votre navigateur.

Quand vous faite un script javascript, vous ne le savez peut être pas, mais vous utiliser une méthode ou un objet de l’objet Window, qui est le parent de tous les objets javascripts.

 

Document est un sous objet de Window. Document est en fait la vraie partie visible de la page qui est dans votre navigateur.

Pour savoir ce que l’objet Window contient, je vous invite à faire tourner le script suivant dans la console javascript (pour Chrome, faire F12,cliquer sur console) :

console.log(window);

 

cette ligne de javascript va afficher l’objet Widow dans la console de debug. Déplier le et vous allez être submergé, car il contient beaucoup d’objet, et vous allez vous rendre compte qu’il est facile de faire une radiographie de la page web et très facilement.

Ne sous estimez pas la puissance d’un simple console.log, il vous permet d’afficher n’importe quel objet, même les lus obscure. Par exemple, quend vous chargez un script Jquery, il est rattaché au DOM donc à window. Vous pourrez afficher tout l’objet Jquery et regarder ce qu’il contient ! De même si vous ne savez pas ce qu’il y a dans l’objet Angular, vous pouvez l’afficher de cette façon. Attention, c’est gros et vous allez peut etre vous y perdre.

 

Cas des iframes

Lorsqu’il y a des iframes dans votre page html, le code JS qu’il y a dans le ifrmae ne peut pas accéder directement à la fenêtre qui le contient. Si vous êtes dans l’iframe, pour accéder à un élément du DOM de la fenêtre parente, vous devez faire :

var topWindow = window.top

votre variable topWindow contiendra une référence vers l’objet window le pus haut dans la hiérachie des windows, oui il peut avoir plusieurs windows dans une page web.

Le parent immédiat :

Si vous êtes dans une iframe et que vous voulez le parent immédiat :

var parentWindow = window.parent