v152 · 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 152 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 152+ 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 152 parent -->
<iframe
  src="/v152/responsively-sized-iframe/embed"
  allow-responsive-sizing></iframe>

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

<!-- no sizing script required -->

see also