diff --git a/files/en-us/web/api/window/index.md b/files/en-us/web/api/window/index.md index 8c344b67c89fd5f..3ff9644f4c3b6ee 100644 --- a/files/en-us/web/api/window/index.md +++ b/files/en-us/web/api/window/index.md @@ -238,6 +238,8 @@ _This interface inherits methods from the {{domxref("EventTarget")}} interface._ - : Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. - {{domxref("Window.requestIdleCallback()")}} - : Enables the scheduling of tasks during a browser's idle periods. +- {{domxref("Window.requestResize()")}} + - : Updates the size information shared by an embedded document with its embedding parent, but only if the embedded page has opted in to sharing its size information. - {{domxref("Window.resizeBy()")}} - : Resizes the current window by a certain amount. - {{domxref("Window.resizeTo()")}} diff --git a/files/en-us/web/api/window/requestresize/index.md b/files/en-us/web/api/window/requestresize/index.md new file mode 100644 index 000000000000000..e2f1140ed680ab5 --- /dev/null +++ b/files/en-us/web/api/window/requestresize/index.md @@ -0,0 +1,122 @@ +--- +title: "Window: requestResize() method" +short-title: requestResize() +slug: Web/API/Window/requestResize +page-type: web-api-instance-method +browser-compat: api.Window.requestResize +--- + +{{APIRef}} + +The **`requestResize()`** method of the {{domxref("Window")}} interface updates the size information shared by an embedded document with its embedding parent, but only if the embedded page has opted in to sharing its size information. + +## Syntax + +```js-nolint +requestResize() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref("undefined")}}). + +## Description + +For security and privacy reasons, {{htmlelement("iframe")}} elements do not by default expose any information to the parent page about the size of the content they are embedding. + +To enable responsive sizing of {{htmlelement("iframe")}} elements based on their content, the [``](/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing) tag can be included in an embedded document to opt it in to sharing its size information with the parent page. The {{cssxref("frame-sizing")}} CSS property can then be set on the ` +``` + +The `frame.html` page includes a {{htmlelement("div")}} element with a [`tabindex`](/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) value of `0` set so that it is focusable. It contains a heading and some paragraphs. The page also includes the `` tag, which opts it in to sharing its content layout size with the parent page. + +```html + + ... + + + + ... + + +
+

This is my frame

+

This is the content of my discontent.

+

This is some more content.

+
+ +``` + +#### CSS + +The ` +``` + +The `frame.html` page contains a heading and some paragraphs. More significantly, however, it includes the `` tag, which opts it in to sharing its content layout size with the parent page. + +```html + + ... + + + + ... + + +

This is my frame

+

This is the content of my discontent.

+

This is some more content.

+ +``` + +#### CSS + +The `