Jaka jest różnica między oknem, ekranem i dokumentem w JavaScript?
Odpowiedzi:
Windowjest głównym katalogiem obiektowym JavaScript, czyli global objectw przeglądarce, może być również traktowany jako katalog główny modelu obiektowego dokumentu. Możesz uzyskać do niego dostęp jakowindow
window.screenlub po prostu screenjest małym obiektem informacyjnym o fizycznych wymiarach ekranu.
window.documentlub po prostu documentjest głównym obiektem potencjalnie widocznego (lub jeszcze lepiej: renderowanego) modelu obiektowego dokumentu / DOM.
Ponieważ windowjest to obiekt globalny, możesz odwoływać się do dowolnych jego właściwości za pomocą samej nazwy właściwości - więc nie musisz zapisywać window.- zostanie to określone przez środowisko wykonawcze.
windowz rzutnią . A windowjest obiektem JavaScript dla karty przeglądarki lub <iframe>(lub przestarzałym <frame>). Wziernika jest prostokąt świadczonych documentwidać na karcie lub ramki.
Cóż, okno jest pierwszą rzeczą, która zostaje załadowana do przeglądarki. Ten obiekt okna ma większość właściwości, takich jak długość, wewnętrzna szerokość, wewnętrzna wysokość, nazwa, jeśli został zamknięty, jego rodzice i inne.
Co zatem z obiektem dokumentu? Obiektem dokumentu jest twój html, aspx, php lub inny dokument, który zostanie załadowany do przeglądarki. Dokument faktycznie ładuje się do obiektu okna i ma dostępne właściwości, takie jak tytuł, adres URL, plik cookie itp. Co to tak naprawdę oznacza? Oznacza to, że jeśli chcesz uzyskać dostęp do właściwości okna, jest to window.property, jeśli jest to dokument, to window.document.property, który jest również dostępny w skrócie jako document.property.
To wydaje się dość proste. Ale co się stanie po wprowadzeniu IFRAME?
W skrócie, bardziej szczegółowo poniżej,
windowto kontekst wykonania i obiekt globalny dla JavaScript tego kontekstudocumentzawiera DOM, zainicjowany przez parsowanie HTMLscreenopisuje pełny ekran wyświetlacza fizycznego
Zobacz W3C i odniesienia Mozilli, aby uzyskać szczegółowe informacje na temat tych obiektów. Najbardziej podstawową relacją między tymi trzema jest to, że każda karta przeglądarki ma swoją własną window, a także windowma window.documenti window.screenwłaściwości. Przeglądarka Tab windowjest kontekst globalny, więc documenti screenodnoszą się do window.documenta window.screen. Więcej szczegółów na temat tych trzech obiektów znajduje się poniżej, zgodnie z JavaScriptem Flanagana: Przewodnik definitywny .
window
Każda karta przeglądarki ma własny obiekt najwyższego poziomu window. Każdy <iframe>(i nieaktualny <frame>) element ma również swój własny windowobiekt, zagnieżdżony w oknie nadrzędnym. Każde z tych okien otrzymuje własny osobny obiekt globalny. window.windowodnosi się zawsze window, ale window.parenti window.topmoże odnosić się do zamykania okien, co daje dostęp do innych kontekstów wykonania. Oprócz documenti screenopisanych poniżej windowwłaściwości obejmują
setTimeout()isetInterval()powiązanie procedur obsługi zdarzeń z zegaremlocationpodając bieżący adres URLhistorymetodamiback()iforward()historią zmienną kartynavigatoropisujący oprogramowanie przeglądarki
document
Każdy windowobiekt ma documentobiekt do renderowania. Obiekty te są częściowo mylone, ponieważ elementy HTML są dodawane do obiektu globalnego po przypisaniu unikalnego identyfikatora. Na przykład we fragmencie HTML
<body>
<p id="holyCow"> This is the first paragraph.</p>
</body>do elementu akapitu można odwoływać się w dowolny z następujących sposobów:
window.holyCowlubwindow["holyCow"]document.getElementById("holyCow")document.body.firstChilddocument.body.children[0]
screen
windowObiekt posiada także screenobiekt z właściwościami opisującymi wyświetlacz fizycznej:
właściwości ekranu
widthiheightto pełny ekranwłaściwości ekranu
availWidthiavailHeightpomiń pasek narzędzi
Część ekranu wyświetlającego renderowany dokument jest rzutnia w JavaScript, który jest potencjalnie mylące, ponieważ nazywamy część danej aplikacji na ekranie okno, gdy mówimy o interakcji z systemem operacyjnym. getBoundingClientRect()Sposób według dowolnego documentelementu powróci obiekt o top, left, bottom, i rightwłaściwości opisujące położenie elementu w widoku.
window.onloadkorzystania z obiektu dokumentu?
Jest windowto rzeczywisty obiekt globalny.
Jest screento ekran, zawiera właściwości dotyczące wyświetlania użytkownika.
Tam documentjest DOM.
documentmoże również być window.document, screenmoże być window.screeni windowmoże być window.window(lub window.window.window) :-P
windowjest zmienną globalną, co czyni ją własnością windowobiektu globalnego . :-)
windowzawiera wszystko, więc można zadzwonić window.screeni window.documentuzyskać te elementy. Sprawdź to skrzypce, ładnie drukując zawartość każdego obiektu: http://jsfiddle.net/JKirchartz/82rZu/
Możesz również zobaczyć zawartość obiektu w narzędziach firebug / dev, takich jak:
console.dir(window);
console.dir(document);
console.dir(screen);windowjest źródłem wszystkiego, screenma tylko wymiary ekranu i documentjest najwyższym obiektem DOM. więc możesz myśleć o tym windowjak o super document...
Okno jest pierwszą rzeczą, która zostaje załadowana do przeglądarki. Ten obiekt okna ma większość właściwości, takich jak długość, wewnętrzna szerokość, wewnętrzna wysokość, nazwa, jeśli został zamknięty, jego rodzice i inne.
Obiektem dokumentu jest twój html, aspx, php lub inny dokument, który zostanie załadowany do przeglądarki. Dokument faktycznie ładuje się do obiektu okna i ma dostępne właściwości, takie jak tytuł, adres URL, plik cookie itp. Co to tak naprawdę oznacza? Oznacza to, że jeśli chcesz uzyskać dostęp do właściwości okna, jest to window.property, jeśli jest to dokument, to window.document.property, który jest również dostępny w skrócie jako document.property.