Qual è la differenza tra finestra, schermo e documento in Javascript?
Risposte:
Windowè la radice dell'oggetto JavaScript principale, nota anche come global objectin un browser, può anche essere considerata la radice del modello a oggetti del documento. Puoi accedervi comewindow
window.screeno semplicemente screenè un piccolo oggetto informativo sulle dimensioni fisiche dello schermo.
window.documento semplicemente documentè l'oggetto principale del modello / DOM oggetto del documento potenzialmente visibile (o meglio ancora: reso).
Poiché windowè l'oggetto globale è possibile fare riferimento a qualsiasi proprietà di esso solo con il nome della proprietà, quindi non è necessario annotare window., verrà calcolato dal runtime.
windowcon viewport . A windowè l'oggetto JavaScript per la scheda del browser o <iframe>(o obsoleto <frame>). Il viewport è il rettangolo del rendering documentvisto all'interno della scheda o della cornice.
Bene, la finestra è la prima cosa che viene caricata nel browser. Questo oggetto finestra ha la maggior parte delle proprietà come length, innerWidth, innerHeight, name, se è stato chiuso, i suoi genitori e altro.
Che dire dell'oggetto documento allora? L'oggetto documento è il tuo html, aspx, php o altro documento che verrà caricato nel browser. Il documento viene effettivamente caricato all'interno dell'oggetto finestra e ha proprietà disponibili come titolo, URL, cookie, ecc. Cosa significa veramente? Ciò significa che se si desidera accedere a una proprietà per la finestra è window.property, se è document è window.document.property che è anche disponibile in breve come document.property.
Sembra abbastanza semplice. Ma cosa succede una volta introdotto un IFRAME?
In breve, con maggiori dettagli di seguito,
windowè il contesto di esecuzione e l'oggetto globale per il JavaScript di quel contestodocumentcontiene il DOM, inizializzato analizzando HTMLscreendescrive lo schermo intero del display fisico
Vedi riferimenti W3C e Mozilla per dettagli su questi oggetti. La relazione di base fra i tre è che ogni scheda del browser ha il proprio window, e di un windowha window.documente window.screenproprietà. Il browser scheda del windowè il contesto globale, così documente screensi riferiscono a window.documented window.screen. Ulteriori dettagli sui tre oggetti sono riportati di seguito, seguendo il JavaScript di Flanagan: Guida definitiva .
window
Ogni scheda del browser ha il suo windowoggetto di livello superiore . Ogni elemento <iframe>(e obsoleto <frame>) ha anche il suo windowoggetto, nidificato in una finestra padre. Ognuna di queste finestre ottiene il proprio oggetto globale separato. window.windowsi riferisce sempre window, ma window.parente window.toppotrebbe fare riferimento a racchiudere finestre, che danno accesso ad altri contesti di esecuzione. Oltre documente screendescritti di seguito, le windowproprietà includono
setTimeout()esetInterval()associare i gestori di eventi a un timerlocationfornendo l'URL correntehistorycon metodiback()eforward()fornendo la cronologia mutabile della schedanavigatordescrivendo il software del browser
document
Ogni windowoggetto ha un documentoggetto da rendere. Questi oggetti vengono in parte confusi perché gli elementi HTML vengono aggiunti all'oggetto globale quando viene assegnato un ID univoco. Ad esempio, nello snippet HTML
<body>
<p id="holyCow"> This is the first paragraph.</p>
</body>l'elemento del paragrafo può essere referenziato da uno dei seguenti:
window.holyCowowindow["holyCow"]document.getElementById("holyCow")document.body.firstChilddocument.body.children[0]
screen
L' windowoggetto ha anche un screenoggetto con proprietà che descrivono la visualizzazione fisica:
proprietà dello schermo
widtheheightsono a schermo interoproprietà dello schermo
availWidtheavailHeightomettere la barra degli strumenti
La parte di uno schermo che mostra il documento renderizzato è il viewport in JavaScript, il che è potenzialmente confuso perché chiamiamo una parte dello schermo di una finestra una finestra quando parliamo di interazioni con il sistema operativo. Il getBoundingClientRect()metodo di qualsiasi documentelemento restituirà un oggetto con top, left, bottom, e rightproprietà che descrivono la posizione dell'elemento nella vista.
window.onloadall'utilizzo dell'oggetto documento?.
Il windowè l'oggetto globale attuale.
Lo screenè lo schermo, che contiene le proprietà sulla visualizzazione dell'utente.
La documentè dove il DOM è.
documentpuò anche essere window.document, screenpuò essere window.screene windowpuò essere window.window(o window.window.window) :-P
windowè una variabile globale, che la rende una proprietà windowdell'oggetto globale . :-)
la windowcontiene tutto, in modo da poter chiamare window.screene window.documentper ottenere quegli elementi. Dai un'occhiata a questo violino, che stampa il contenuto di ogni oggetto: http://jsfiddle.net/JKirchartz/82rZu/
Puoi anche vedere il contenuto dell'oggetto negli strumenti firebug / dev in questo modo:
console.dir(window);
console.dir(document);
console.dir(screen);windowè la radice di tutto, screenha solo dimensioni dello schermo ed documentè il principale oggetto DOM. quindi puoi pensarlo windowcome un super- document...
La finestra è la prima cosa che viene caricata nel browser. Questo oggetto finestra ha la maggior parte delle proprietà come lunghezza, innerWidth, innerHeight, nome, se è stato chiuso, i suoi genitori e altro.
L' oggetto documento è il tuo html, aspx, php o altro documento che verrà caricato nel browser. Il documento viene effettivamente caricato all'interno dell'oggetto finestra e ha proprietà disponibili come titolo, URL, cookie, ecc. Cosa significa veramente? Ciò significa che se si desidera accedere a una proprietà per la finestra è window.property, se è document è window.document.property che è anche disponibile in breve come document.property.