v150 · HTML · Frames

postMessage Comparison

Both panels are real iframes loading the same same-origin child route. The legacy panel resizes only after a child ResizeObserver posts a height. The Chrome 150 panel opts in with allow-responsive-sizing and the child response sends Supports-Responsive-Sizing: 1.

Capability probe Checking iframe IDL support… Child route header: not checked

In Chrome 150+ the right iframe should not need a sizing message at all. In older browsers this page uses the same child route with an explicit fallback message and labels that path as fallback.

Legacy approach postMessage

iframe height: 130px
last event: waiting

Declarative approach allow-responsive-sizing

iframe height: browser-managed
mode: checking support

event log

code comparison

// Legacy child
new ResizeObserver(() => {
  parent.postMessage({
    type: "responsive-iframe-height",
    height: document.documentElement.scrollHeight
  }, "*");
}).observe(document.documentElement);

// Legacy parent
addEventListener("message", event => {
  iframe.style.height = event.data.height + "px";
});

<!-- Chrome 150 parent -->
<iframe
  src="/v150/responsively-sized-iframe/embed"
  allow-responsive-sizing></iframe>

HTTP/1.1 200 OK
Supports-Responsive-Sizing: 1

<!-- no sizing script required -->

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗

code comparison

see also

implementation reference