A box in the page
An iframe (inline frame) embeds a whole second web page inside yours. That page is loaded and parsed on its own: it gets its own document, its own DOM tree and its own JavaScript window.
The parser builds your DOM: html, head, body, h1 and one iframe element. The browser draws a box 400 by 300 CSS pixels, holding an empty about:blank page. The parser does not wait for the frame.
loading="lazy" tells the browser not to fetch the frame yet. It waits until the box comes near the visible part of the screen, so a frame far down a long page costs nothing until the reader scrolls there.
Its own document
The box is on screen, so the browser fetches the src address, https://map.example/cafe. This is a separate HTTP request to a different site, just as if you had typed that address into a new tab.
The map page's HTML arrives and is parsed into a second, separate DOM with its own window object, then drawn inside the box. Your DOM is unchanged: it still holds only the iframe element, none of the map's elements.
title="Map to our cafe" gives the frame an accessible name. A screen reader announces it, so its user knows what the embedded page is before deciding to move into it.
Walls and doors
Your script asks for frame.contentDocument and gets null. An origin is scheme, host and port: https://cafe.example and https://map.example differ, so the same-origin policy keeps each page's DOM private from the other.
The two windows can still trade messages. Your script calls postMessage("zoom", "https://map.example") on frame.contentWindow. The map page checks that event.origin is https://cafe.example, then zooms in.
Add a sandbox attribute and the frame loses powers: no scripts, forms, pop-ups or navigating your page, and it gets a unique origin of its own. Each token you list, such as allow-scripts, gives one power back.
The embedded site has a say too. If its response carries the header Content-Security-Policy: frame-ancestors 'none' (or the older X-Frame-Options: DENY), the browser will not show it in a frame and shows an error instead.
What happens
;; step 1/10 · page-in-page
file index.html on https://cafe.example (5 lines)
1 <h1>Find us</h1>
2 <iframe src="https://map.example/cafe"
3 title="Map to our cafe"
4 width="400" height="300"
5 loading="lazy"></iframe>
iframe inline frame: one element, one box,
and a separate page living inside it
Until the src page arrives, every new frame holds an "initial about:blank" document that already has html, head and body elements. It is replaced when the real page loads. The outer page's load event waits for its frames (and images and stylesheets) to finish loading, but the parser itself never stops for a frame.