来自父窗口大小的iframe媒体查询

Question

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

您可以想象，由于iframe的大小，该iframe中的组件将呈现为窗口较小（在这种情况下为平板电脑）。

是否有任何方法可以使iframe中的媒体查询响应父窗口的大小？我们现在不太在乎响应性，但是至少我们希望看到呈现的所有内容都好像窗口iframe是桌面大小一样。

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

Answer 1

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

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