在iFrame中响应Bootstrap

Question

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

此网站应在其他域的Iframe内配置。

我的疑问是我应该写一个调整大小脚本来正确滚动iFrame内部，或者因为我的应用程序是使用Bootstrap设计的，它会根据父域iFrame大小自动执行响应。

Answer 1

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

Answer 2

这取决于您是希望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);
});