Quelle est la différence entre fenêtre, écran et document en Javascript?
Réponses:
Windowest la racine principale de l'objet JavaScript, alias le global objectdans un navigateur, peut également être traitée comme la racine du modèle d'objet de document. Vous pouvez y accéder en tant quewindow
window.screenou screenest simplement un petit objet d'information sur les dimensions physiques de l'écran.
window.documentou documentest simplement l'objet principal du modèle d'objet de document / DOM potentiellement visible (ou mieux encore: rendu).
Puisque windowc'est l'objet global, vous pouvez en référencer toutes les propriétés avec juste le nom de la propriété - vous n'avez donc pas à l'écrire window.- il sera compris par le runtime.
windowavec la fenêtre d'affichage . A windowest l'objet JavaScript de l'onglet du navigateur ou <iframe>(ou obsolète <frame>). La fenêtre est le rectangle du rendu documentvu dans l'onglet ou le cadre.
Eh bien, la fenêtre est la première chose qui se charge dans le navigateur. Cet objet fenêtre possède la majorité des propriétés telles que la longueur, la largeur intérieure, la hauteur intérieure, le nom, s'il a été fermé, ses parents, etc.
Et l'objet document alors? L'objet document est votre document html, aspx, php ou autre qui sera chargé dans le navigateur. Le document est en fait chargé à l'intérieur de l'objet fenêtre et dispose de propriétés comme le titre, l'URL, le cookie, etc. Qu'est-ce que cela signifie vraiment? Cela signifie que si vous souhaitez accéder à une propriété pour la fenêtre, il s'agit de window.property, s'il s'agit d'un document, il s'agit de window.document.property qui est également disponible en bref sous le nom de document.property.
Cela semble assez simple. Mais que se passe-t-il une fois qu'un IFRAME est introduit?
En bref, avec plus de détails ci-dessous,
windowest le contexte d'exécution et l'objet global pour le JavaScript de ce contextedocumentcontient le DOM, initialisé par l'analyse HTMLscreendécrit le plein écran de l'affichage physique
Voir les références W3C et Mozilla pour plus de détails sur ces objets. La relation la plus fondamentale entre les trois est que chaque onglet du navigateur a le sien window, et un windowa window.documentet des window.screenpropriétés. L'onglet du navigateur windowest le contexte global, donc documentet screenréférez - vous à window.documentet window.screen. Plus de détails sur les trois objets sont ci-dessous, en suivant JavaScript de Flanagan: Guide définitif .
window
Chaque onglet de navigateur possède son propre windowobjet de niveau supérieur . Chaque élément <iframe>(et obsolète <frame>) possède également son propre windowobjet, imbriqué dans une fenêtre parent. Chacune de ces fenêtres obtient son propre objet global distinct. window.windowtoujours fait référence à window, mais window.parentet window.toppeut se référer à enfermer les fenêtres, donnant accès à d' autres contextes d'exécution. Outre documentet screendécrites ci-dessous, les windowpropriétés comprennent
setTimeout()etsetInterval()liaison des gestionnaires d'événements à une minuterielocationdonnant l'URL actuellehistoryavec des méthodesback()etforward()donnant l'historique mutable de l'ongletnavigatordécrivant le logiciel de navigation
document
Chaque windowobjet a un documentobjet à restituer. Ces objets sont confus en partie parce que les éléments HTML sont ajoutés à l'objet global lorsqu'ils reçoivent un identifiant unique. 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' windowobjet a également un screenobjet avec des propriétés décrivant l'affichage physique:
propriétés de l'écran
widthetheightsont le plein écranpropriétés de l'écran
availWidthetavailHeightomettez la barre d'outils
La partie d'un écran affichant le document rendu est la fenêtre d' affichage en JavaScript, ce qui peut prêter à confusion car nous appelons la partie de l'écran d'une application une fenêtre lorsque nous parlons d'interactions avec le système d'exploitation. Le getBoundingClientRect()procédé selon l' une quelconque documentélément retourne un objet avec top, left, bottom, et des rightpropriétés décrivant l'emplacement de l'élément dans la fenêtre.
window.onloadutilisation de l'objet document?.
Le windowest l'objet global réel.
C'est screenl'écran, il contient des propriétés sur l'affichage de l'utilisateur.
C'est documentlà où se trouve le DOM.
documentpeut aussi être window.document, screenpeut être window.screenet windowpeut être window.window(ou window.window.window) :-P
windowc'est une variable globale, ce qui en fait une propriété de l' windowobjet global . :-)
le windowcontient tout, vous pouvez donc appeler window.screenet window.documentobtenir ces éléments. Découvrez ce violon, imprimant joliment le contenu de chaque objet: http://jsfiddle.net/JKirchartz/82rZu/
Vous pouvez également voir le contenu de l'objet dans des outils firebug / dev comme ceci:
console.dir(window);
console.dir(document);
console.dir(screen);windowest la racine de tout, screenn'a que des dimensions d'écran et documentest le premier objet DOM. vous pouvez donc le considérer windowcomme un super- document...
La fenêtre est la première chose qui se charge dans le navigateur. Cet objet fenêtre possède la majorité des propriétés telles que la longueur, la largeur intérieure, la hauteur intérieure, le nom, 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 en fait chargé à l'intérieur de l'objet fenêtre et dispose de propriétés comme le titre, l'URL, le cookie, etc. Qu'est-ce que cela signifie vraiment? Cela signifie que si vous souhaitez accéder à une propriété pour la fenêtre, il s'agit de window.property, s'il s'agit d'un document, il s'agit de window.document.property qui est également disponible en bref sous le nom de document.property.