Sự khác biệt giữa cửa sổ, màn hình và tài liệu trong Javascript là gì?

243

Tôi thấy các thuật ngữ này được sử dụng thay thế cho nhau như là môi trường toàn cầu cho DOM. Sự khác biệt (nếu có) và khi nào tôi nên sử dụng mỗi cái?

javascript 
— Thời gian nhận
nguồn

Câu trả lời:

248

Windowlà gốc đối tượng JavaScript chính, còn gọi là global objecttrong trình duyệt, cũng có thể được coi là gốc của mô hình đối tượng tài liệu. Bạn có thể truy cập nó nhưwindow

window.screenhoặc chỉ screenlà một đối tượng thông tin nhỏ về kích thước màn hình vật lý.

window.documenthoặc chỉ documentlà đối tượng chính của mô hình đối tượng tài liệu / DOM có khả năng hiển thị (hoặc tốt hơn: được hiển thị).

Vì windowlà đối tượng toàn cầu, bạn có thể tham chiếu bất kỳ thuộc tính nào của nó chỉ bằng tên thuộc tính - vì vậy bạn không phải ghi lại window.- nó sẽ được tìm ra bởi thời gian chạy.

— Peter Aron Zentai
nguồn
46
Tài liệu có thể lớn hơn cửa sổ - cửa sổ là phần "hiển thị" trong trình duyệt của bạn.
— Mandy
1
@Mandy một phần tử html nếu nó không phải là một phần của tài liệu không hiển thị. bạn có thể tạo iframe người là cửa sổ là hoàn toàn không thể nhìn thấy cho đến khi bạn đính kèm các iframe vào tài liệu
— Peter Aron Zentai
27
Nhận xét từ @Mandy nhầm lẫn windowvới chế độ xem . A windowlà đối tượng JavaScript cho tab trình duyệt hoặc <iframe>(hoặc không dùng nữa <frame>). Khung nhìn là hình chữ nhật của kết documentxuất được nhìn thấy trong tab hoặc khung.
— Bennett Brown
2
window.document hay tài liệu giống nhau mọi lúc?
— BOZ
2
vì cửa sổ là đối tượng toàn cầu - mọi thuộc tính / phương thức của nó có thể được truy cập mà không thực sự ghi xuống [window.] vì vậy window.document có thể được viết dưới dạng tài liệu, và tất nhiên nó chỉ ra cùng một thứ - như chính thuộc tính là giống nhau chỉ tham chiếu nhiều cách.
— Peter Aron Zentai
101

Chà, cửa sổ là thứ đầu tiên được tải vào trình duyệt. Đối tượng cửa sổ này có phần lớn các thuộc tính như length, InternalWidth, InternalHeight, name, nếu nó đã bị đóng, cha mẹ của nó, v.v.

Thế còn đối tượng tài liệu thì sao? Đối tượng tài liệu là html, aspx, php hoặc tài liệu khác của bạn sẽ được tải vào trình duyệt. Tài liệu thực sự được tải bên trong đối tượng cửa sổ và có các thuộc tính có sẵn cho nó như tiêu đề, URL, cookie, v.v. Điều này thực sự có nghĩa là gì? Điều đó có nghĩa là nếu bạn muốn truy cập một thuộc tính cho cửa sổ thì đó là window.property, nếu đó là tài liệu thì đó là window.document.property, cũng có sẵn dưới dạng document.property.

dom

Điều đó dường như đủ đơn giản. Nhưng điều gì xảy ra khi IFRAME được giới thiệu?

iframe

— Arlan T
nguồn
14
Gây hiểu lầm cho ai đó đang cố gắng tìm hiểu những điều cơ bản: "Đối tượng tài liệu là html, aspx, php hoặc tài liệu khác của bạn sẽ được tải vào trình duyệt." Trình duyệt kết xuất HTML và CSS và thực thi JavaScript. Các tệp có ngôn ngữ phía máy chủ như PHP không được trình duyệt nhìn thấy.
— Bennett Brown
Đây thực sự là lời giải thích hữu ích kèm theo hình ảnh để hiểu rõ hơn ..
— Faris Rayhan
49

Tóm lại, với nhiều chi tiết dưới đây,

  • window là bối cảnh thực hiện và đối tượng toàn cầu cho JavaScript của bối cảnh đó
  • document chứa DOM, được khởi tạo bằng cách phân tích cú pháp HTML
  • screen mô tả toàn màn hình của màn hình vật lý

Xem tài liệu tham khảo W3C và Mozilla để biết chi tiết về các đối tượng này. Mối quan hệ cơ bản nhất giữa ba là mỗi tab trình duyệt có windowmột thuộc tính riêng và windowcó window.documentvà window.screenthuộc tính. Tab trình duyệt windowlà bối cảnh toàn cầu, vì vậy document, screentham khảo window.documentvà window.screen. Dưới đây là chi tiết về ba đối tượng, theo JavaScript của Flanagan: Hướng dẫn dứt khoát .

window

Mỗi tab trình duyệt có windowđối tượng cấp cao nhất của riêng nó . Mỗi phần tử <iframe>(và không dùng nữa <frame>) cũng có windowđối tượng riêng , được lồng trong cửa sổ cha. Mỗi cửa sổ này có đối tượng toàn cầu riêng. window.windowluôn luôn đề cập đến window, nhưng window.parentvà window.topcó thể đề cập đến việc đóng các cửa sổ, cho phép truy cập vào các bối cảnh thực thi khác. Ngoài documentvà screenđược mô tả dưới đây, windowcác thuộc tính bao gồm

  • setTimeout()và setInterval()ràng buộc xử lý sự kiện với một bộ đếm thời gian
  • location đưa ra URL hiện tại
  • historyvới các phương thức back()và forward()đưa ra lịch sử có thể thay đổi của tab
  • navigator mô tả phần mềm trình duyệt

document

Mỗi windowđối tượng có một documentđối tượng được kết xuất. Các đối tượng này bị lẫn lộn một phần vì các phần tử HTML được thêm vào đối tượng toàn cục khi được gán một id duy nhất. Ví dụ: trong đoạn mã HTML

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

phần tử đoạn có thể được tham chiếu bởi bất kỳ điều nào sau đây:

  • window.holyCow hoặc là window["holyCow"]
  • document.getElementById("holyCow")
  • document.body.firstChild
  • document.body.children[0]

screen

Đối windowtượng cũng có một screenđối tượng với các thuộc tính mô tả hiển thị vật lý:

  • thuộc tính màn hình widthvà heightlà toàn màn hình

  • thuộc tính màn hình availWidthvà availHeightbỏ qua thanh công cụ

Phần màn hình hiển thị tài liệu được hiển thị là chế độ xem trong JavaScript, điều này có thể gây nhầm lẫn vì chúng tôi gọi một phần của ứng dụng là một cửa sổ khi nói về tương tác với hệ điều hành. Các getBoundingClientRect()phương pháp của bất kỳ documentyếu tố sẽ trả về một đối tượng với top, left, bottom, và rightcác thuộc tính mô tả vị trí của phần tử trong viewport.

— Bennett Brown
nguồn
Có một hướng dẫn tương đương để window.onloadsử dụng đối tượng tài liệu?
— FilipeCanatto
— Bennett Brown
48

Đây windowlà đối tượng toàn cầu thực tế.

Đây screenlà màn hình, nó chứa các thuộc tính về màn hình của người dùng.

Đây documentlà nơi DOM là.

— Niết bóng tối tuyệt đối
nguồn
11
documentcũng có thể window.document, screencó thể window.screenvà windowcó thể window.window(hoặc window.window.window) :-P
— Rocket Hazmat
6
@PeterAronZentai: Đó là bởi vì windowlà một biến toàn cục, làm cho nó trở thành một tài sản của windowđối tượng toàn cầu . :-)
— Tên lửa Hazmat
1
Tôi cần mở một trang mới bằng ajax, tôi muốn thay thế toàn bộ trang hiện tại bằng trang mới. Tôi có nên sử dụng $ (tài liệu) .load (trang); hoặc $ (cửa sổ) .load (trang); ?
— Martin AJ
11

các windowchứa tất cả mọi thứ, vì vậy bạn có thể gọi window.screenvà window.documentđể có được những yếu tố này. Kiểm tra câu đố này, in đẹp nội dung của từng đối tượng: http://jsfiddle.net/JKirchartz/82rZu/

Bạn cũng có thể thấy nội dung của đối tượng trong các công cụ firebird / dev như thế này:

console.dir(window);
console.dir(document);
console.dir(screen);

windowlà gốc của mọi thứ, screenchỉ có kích thước màn hình và documentlà đối tượng DOM hàng đầu. vì vậy bạn có thể nghĩ nó windowgiống như một document...

— Kirirchartz
nguồn
1

Cửa sổ là thứ đầu tiên được tải vào trình duyệt. Đối tượng cửa sổ này có phần lớn các thuộc tính như length, InternalWidth, InternalHeight, name, nếu nó đã bị đóng, cha mẹ của nó, v.v.

Đối tượng tài liệu là html, aspx, php hoặc tài liệu khác của bạn sẽ được tải vào trình duyệt. Tài liệu thực sự được tải bên trong đối tượng cửa sổ và có các thuộc tính có sẵn cho nó như tiêu đề, URL, cookie, v.v. Điều này thực sự có nghĩa là gì? Điều đó có nghĩa là nếu bạn muốn truy cập một thuộc tính cho cửa sổ thì đó là window.property, nếu đó là tài liệu thì đó là window.document.property, cũng có sẵn dưới dạng document.property.

— Manjunath Raddi
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.