Quelle est la différence entre la fenêtre, l'écran et le document en Javascript?
Je vois ces termes utilisés de manière interchangeable comme l'environnement global pour le DOM. Quelle est la différence (s'il y en a une) et quand devrais-je utiliser chacun?
6 réponses
Window est le principal objet JavaScript racine, aka l'objet global dans un navigateur, peut également être considérée comme la racine du modèle d'objet de document. Vous pouvez y accéder comme window dans la plupart des cas (dans le navigateur);
window.screen est un petit objet d'information sur les dimensions de l'écran.
window.document ou tout simplement document est l'objet principal du document visible (ou mieux encore: rendu) objet model / DOM.
Eh bien, la fenêtre est la première chose qui est chargée dans le navigateur. Cet objet window possède la majorité des propriétés telles que length, innerWidth, innerHeight, name, s'il a été fermé, ses parents, etc.
Qu'en est-il de l'objet document alors? L'objet document est votre document html, aspx, php ou autre qui sera chargé dans le navigateur. Le document est réellement chargé à l'intérieur de l'objet window et dispose de propriétés telles que le titre, L'URL, le cookie, etc. Qu'est-ce que cela signifie? Cela signifie que si vous voulez accéder à une propriété pour la fenêtre, c'est window.propriété, si c'est un document, c'est une fenêtre.document.propriété qui est également disponible en bref comme document.propriété.
Cela semble assez simple. Mais que se passe-t-il une fois qu'un IFRAME est introduit?
Le window est l'objet global.
Le screen est l'écran, il contient des propriétés de l'utilisateur affichage.
Le {[2] } est l'endroit où se trouve le DOM.
Brièvement, avec plus de détails ci-dessous,
-
windowest le contexte d'exécution et l'objet global pour le JS de ce contexte -
documentcontient le code HTML -
screendécrit le plein écran de l'affichage Physique
VoirW3C etMozilla références pour plus de détails sur ces objets. La relation la plus fondamentale entre les trois est que chaque onglet du navigateur a ses propres window, et un window a window.document et window.screen propriétés. L'onglet du navigateur window est le contexte global, donc document et screen se réfèrent à window.document et window.screen. Plus de détails sur les trois objets sont ci-dessous, suivant JavaScript de Flanagan: guide définitif.
window
Chaque onglet du navigateur a son propre objet window de niveau supérieur. Chaque élément <iframe> (et obsolète <frame>) a également son propre objet window, imbriqué dans une fenêtre parent. Chacune de ces fenêtres obtient son propre objet global distinct. window.window renvoie toujours à window, mais window.parent et window.top peut se référer à enfermant les fenêtres, donnant accès à d'autres contextes d'exécution. En plus de document et screen décrits ci-dessous, les propriétés window comprennent
-
setTimeout()etsetInterval()liaison des gestionnaires d'événements à une minuterie -
locationdonnant L'URL actuelle -
historyavec les méthodesback()etforward()donnant l'historique mutable de l'onglet -
navigatorDescription du logiciel de navigation
document
Chaque objet window a un objet document à rendre. Ces objets confus en partie parce que les éléments HTML sont ajoutés à l'objet global lorsqu'un id unique est attribué. Par exemple, dans L'extrait HTML
<body>
<p id="holyCow"> This is the first paragraph.</p>
</body>
L'élément de paragraphe peut être référencé par l'un des éléments suivants:
-
window.holyCowouwindow["holyCow"] document.getElementById("holyCow")document.body.firstChilddocument.body.children[0]
screen
L'objet window possède également un objet screen avec des propriétés décrivant l'affichage physique:
Les propriétés de L'écran
widthetheightsont le plein écran-
Les propriétés de L'écran
availWidthetavailHeightomettent la barre d'outils
La partie d'un écran affichant le document rendu est la fenêtre en JavaScript, ce qui est potentiellement déroutant car nous appelons la partie de l'écran d'une application une fenêtre lorsqu'on parle d'interactions avec le système d'exploitation. Le getBoundingClientRect() méthode de document élément retourne un objet avec top, left, bottom, et right propriétés décrivant l'emplacement de l'élément dans la fenêtre d'affichage.
Le window contient tout, donc vous pouvez appeler window.screen et window.document pour obtenir ces éléments. Découvrez ce violon, en imprimant joliment le contenu de chaque objet: http://jsfiddle.net/JKirchartz/82rZu/
Vous pouvez également voir le contenu de l'objet dans les outils firebug/dev comme ceci:
console.dir(window);
console.dir(document);
console.dir(screen);
window est la racine de tout, screen a juste des dimensions d'écran, et document est l'objet DOM supérieur. donc, vous pouvez le considérer comme window étant comme un super - document...
La fenêtre est la première chose qui est chargé dans le navigateur. Cet objet window possède la majorité des propriétés telles que length, innerWidth, innerHeight, name, s'il a été fermé, ses parents, etc.
L'objet document est votre document html, aspx, php ou autre qui sera chargé dans le navigateur. Le document est réellement chargé à l'intérieur de l'objet window et dispose de propriétés telles que le titre, L'URL, le cookie, etc. Qu'est-ce vraiment signifie? Cela signifie que si vous voulez accéder à une propriété pour la fenêtre, c'est window.propriété, si c'est un document, c'est une fenêtre.document.propriété qui est également disponible en bref comme document.propriété.