来自父窗口大小的 iframe 媒体查询 [重复]答案

【问题标题】：Iframe media queries from parent window size [duplicate]来自父窗口大小的 iframe 媒体查询 [重复]
【发布时间】：2019-12-06 20:57:42
【问题描述】：

出于多种原因，我们不得不使用 iframe 将 React 应用程序嵌入到我们当前的网页中（不使用 React）。问题是我们在这个 React 应用程序中使用了一些组件，这些组件通过使用媒体查询来响应。

您可以想象，由于 iframe 的大小，该 iframe 中的组件被呈现为好像窗口更小（在本例中为平板电脑）。

有没有办法让 iframe 中的媒体查询响应父窗口的大小？我们现在不太关心响应能力，但至少我们希望看到呈现的所有内容都好像窗口 iframe 是桌面大小一样。

我看过这篇文章，但似乎没有用（我认为更改元视口仅适用于移动设备）：https://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

【问题讨论】：

【解决方案1】：

听起来您可以同时控制父级和 iframe，解决此问题的一种方法是使用 postMessage API 将主机窗口的大小发布到 iframe 中，然后使用在你的 React 应用中使用 Node.js。

如果您使用 iframe-resizer 之类的内容，您将获得双向消息传递以及同时免费响应 iframed 内容大小的可能性。

【讨论】：