JavaScript Document defaultView Property

What You’ll Learn

Document.defaultView is a read-only instance property that returns the Window associated with a document, or null if none is available. Learn how it relates to the global window, when it is null, how iframes fit in, and five examples with try-it labs.

Introduction

Every displayed HTML page has a Document (the DOM tree) and a Window (the browsing context: viewport size, location, alert, timers, and so on).

MDN: in browsers, document.defaultView returns the window object associated with that document, or null if none is available. On a normal page, document.defaultView === window is true.

Related Document tutorials: customElementRegistry, currentScript, Document constructor.

Understanding Document.defaultView

A read-only instance property on Document. Its value is a Window (browsing context) or null.

• Main page — usually the same object as global window.
• Read-only — you cannot assign a new view (MDN).
• May be null — document not tied to a browsing context.
• Iframes — nested document’s defaultView matches that frame’s window when accessible.
• Useful APIs — innerWidth, getComputedStyle, matchMedia, scrollTo via the Window.

📝 Syntax

document.defaultView

Value

The associated Window object, or null if none is available (MDN).

Typical check

const win = document.defaultView;
if (win) {
  console.log(win.innerWidth);
} else {
  console.log("No browsing context for this document");
}

⚖️ Window accessors compared

Examples Gallery

Examples follow MDN Document: defaultView. Use View Output or Try It Yourself for each case.

console.log(document.defaultView === window); // true
console.log(document.defaultView.document === document); // true

true
true

const win = document.defaultView;
console.log("innerWidth:", win.innerWidth);
console.log("innerHeight:", win.innerHeight);

innerWidth: 1280
innerHeight: 720

const el = document.body;
const win = document.defaultView;
const styles = win.getComputedStyle(el);
console.log("body display:", styles.display);

body display: block

const fresh = document.implementation.createHTMLDocument("Scratch");
console.log("Main defaultView null?", document.defaultView === null);
console.log("Fresh defaultView:", fresh.defaultView);
// May be a Window, or null depending on environment — always check

Main defaultView null? false
Fresh defaultView: [object Window]

function getViewportWidth(doc = document) {
  const win = doc.defaultView;
  if (!win) return null;
  return win.innerWidth;
}

console.log("Width:", getViewportWidth());
console.log("Width (explicit):", getViewportWidth(document));

Width: 1280
Width (explicit): 1280

🚀 Common Use Cases

• Multi-document libraries — resolve Window from a given Document.
• iframe tooling — work with contentDocument.defaultView when accessible.
• Computed styles — call getComputedStyle on the correct Window.
• Responsive helpers — read innerWidth / matchMedia for that document’s view.
• Testing / SSR awareness — handle null when no browsing context exists.
• Teaching Document ↔ Window — show the bidirectional link with window.document.

📝 Notes

• MDN: Baseline Widely available (since July 2015) — no Deprecated / Experimental / Non-standard banner.
• Read-only; returns Window or null.
• On normal pages, equals the global window.
• Cross-origin iframes may block access to contentDocument / nested defaultView.
• Related: customElementRegistry, currentScript, ownerDocument, Document constructor.

💡 Best Practices