This question already exists:
Force resolution in iframe that has media queries
                        
                                在8个月前关闭。
            
                    
由于多种原因,我们不得不使用iframe将React应用程序嵌入到当前网页中(不使用React)。问题是我们在此React应用程序中使用了一些通过使用媒体查询来响应的组件。

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

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

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

最佳答案

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

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

10-05 20:52
查看更多