I have an iframe that has quite a bit of white space tacked onto the end of visible elements. In fact, I know that the iframe is loading the size of all my elements including hidden elements. These elements were meant to be hidden until some knockout questions are answered, at which point the iframe should resize accordingly.
我有一个iframe,在可见元素的末尾有相当多的空白区域。事实上,我知道iframe正在加载我所有元素的大小,包括隐藏元素。这些元素是隐藏的,直到一些淘汰赛问题得到解答,此时iframe应相应调整大小。
The other battle I am fighting with this is the fact that I am also having to deal with two scroll bars, one for the iframe, and of course the web page scroll bar. This is just very tacky and not very user friendly.
我正在与之抗争的另一场战斗是,我还需要处理两个滚动条,一个用于iframe,当然还有网页滚动条。这只是非常俗气,不是非常用户友好。
This is a problem I inherited, so I am hoping for a solution involving the iframe. I am also willing to explore other solutions as maybe this is not the most appropriate as it is.
这是我继承的问题,所以我希望有一个涉及iframe的解决方案。我也愿意探索其他解决方案,因为这可能不是最合适的。
3 个解决方案
#1
1
You might update the height of the <iframe> from the framed page using JavaScript after a new element is shown.
在显示新元素后,您可以使用JavaScript更新框架页面中
function resizeParent() {
if (!window.parent) return;
var height = $(document).height();
$(window.parent.document).find('iframe').height(height);
}
Demo
Source of framed page
Note, this will only work if both pages are loaded from the same domain.
请注意,这仅适用于从同一域加载两个页面的情况。
#2
5
To get rid of scroll bars, try adding scrolling="no" to the iframe. HTML iframe - disable scroll
要摆脱滚动条,请尝试向iframe添加scrolling =“no”。 HTML iframe - 禁用滚动
#3
1
Use both the inline style attribute style="overflow:hidden;" as well as the attribute scrolling="no". overflow:hidden is the proper HTML5 counterpart, so it's best to mix both.
使用内联样式属性style =“overflow:hidden;”以及属性scrolling =“no”。 overflow:hidden是正确的HTML5对应物,因此最好将两者混合使用。
Edit: In fact, if it is suited for your case, try using the iframe seamless boolean attribute. It practically makes the iframe styled as if it's part of the containing document, including no borders or scrollbars. I recommend it because it's like a one-stop for what you need to accomplish, and it does the work for you. You can try a combination of all the three attributes I recommended for ideal browser compatibility.
编辑:事实上,如果它适合您的情况,请尝试使用iframe无缝布尔属性。它实际上使iframe的样式就好像它是包含文档的一部分,包括没有边框或滚动条。我推荐它,因为它就像你需要完成的一站式一样,它为你工作。您可以尝试将我建议的所有三个属性组合使用,以实现理想的浏览器兼容性。
#1
1
You might update the height of the <iframe> from the framed page using JavaScript after a new element is shown.
在显示新元素后,您可以使用JavaScript更新框架页面中
function resizeParent() {
if (!window.parent) return;
var height = $(document).height();
$(window.parent.document).find('iframe').height(height);
}
Demo
Source of framed page
Note, this will only work if both pages are loaded from the same domain.
请注意,这仅适用于从同一域加载两个页面的情况。
#2
5
To get rid of scroll bars, try adding scrolling="no" to the iframe. HTML iframe - disable scroll
要摆脱滚动条,请尝试向iframe添加scrolling =“no”。 HTML iframe - 禁用滚动
#3
1
Use both the inline style attribute style="overflow:hidden;" as well as the attribute scrolling="no". overflow:hidden is the proper HTML5 counterpart, so it's best to mix both.
使用内联样式属性style =“overflow:hidden;”以及属性scrolling =“no”。 overflow:hidden是正确的HTML5对应物,因此最好将两者混合使用。
Edit: In fact, if it is suited for your case, try using the iframe seamless boolean attribute. It practically makes the iframe styled as if it's part of the containing document, including no borders or scrollbars. I recommend it because it's like a one-stop for what you need to accomplish, and it does the work for you. You can try a combination of all the three attributes I recommended for ideal browser compatibility.
编辑:事实上,如果它适合您的情况,请尝试使用iframe无缝布尔属性。它实际上使iframe的样式就好像它是包含文档的一部分,包括没有边框或滚动条。我推荐它,因为它就像你需要完成的一站式一样,它为你工作。您可以尝试将我建议的所有三个属性组合使用,以实现理想的浏览器兼容性。