在 iFrame 中引导响应

Bootstrap responsive inside iFrame

本文关键字：响应 iFrame      更新时间：2023-09-26

我们有一个用Angular/bootstrap构建的网站。

此站点应在另一个域的 Iframe 内配置。

我的疑问是我应该编写一个调整大小脚本以在 iFrame 中正确滚动，还是因为我的应用程序是使用 Bootstrap 设计的，它是否会根据父域 iFrame 大小自动响应。

Bootstrap 将负责响应能力本身，但唯一的条件是，您正确遵循行和列结构。

这取决于您是否希望 iframe 为固定高度并具有垂直滚动条，或者是否希望 iframe 的高度随嵌入页面动态变化。

如果是前者，您不需要做任何事情，Bootstrap 已经覆盖了宽度。

如果您希望 iframe 高度根据嵌入页面的高度而变化(这将随着响应式设计而变化(，则需要 JS 来调整 iframe 的大小。

例如

var iframeResize = function() {
    var iFrameID = document.getElementById('myIframe');
    if(iFrameID) {
        iFrameID.height = iFrameID.contentWindow.document.body.offsetHeight + "px";
    }
}
$(function() {
    $(window).resize(iframeResize);
});
相关文章：