检查 iframe 是否具有可见的滚动条

Question

我想知道是否有人知道如何检查 iframe 中的内容是否溢出并且滚动条是否可见？

谢谢

Answer 1

一般来说，

你应该比较元素的scrollHeight/scrollWidth和offsetHeight/offsetWidth的增量。如果是肯定的，那么"我们得到了一个赢家"。但。。在iframe中查找滚动条时，事情变得更加棘手：

var frm=document.getElementById("frm");
var iIsVrScrollBar =  frm.contentWindow.document.documentElement.scrollHeight>frm.contentWindow.document.documentElement.offsetHeight ? 1 : 0;
var iIsHrScrollBar = frm.contentWindow.document.documentElement.scrollWidth>frm.contentWindow.document.documentElement.offsetWidth ? 1 : 0;

Answer 2

您要检查元素的scrollHeight是否大于clientHeight，或者元素的scrollWidth是否大于clientWidth。这可以直接使用这些属性来完成，也可以通过使用 jQuery 提供的帮助程序方法来完成。

MDN： element.scrollHeight

如果元素的内容生成了垂直滚动条，则scrollHeight 值等于最小客户端高度元素需要以便将所有内容都放在视点中，而无需使用垂直滚动条。当元素的内容没有生成一个垂直滚动条，则其 scrollHeight 属性相等到其客户端高度属性。这可能意味着内容太短，需要滚动条或元素具有 CSS 样式可见（不可滚动）的溢出值。

Answer 3

我必须修改代码才能使其工作。

1）IFRAME和内容位于同一网站/文件夹结构上

2） 通过将"sizewindow"设置为 TRUE 来启动该过程

3）它片段是设置在Anout 0.5秒的计时器函数的一部分

4）在IE11，FF34和35，Chrome 31和40以及Opera 12.6上进行测试

5）活动代码将窗口大小调整为刚好大于内容，

见 http://www.users.waitrose.com/~cresby/map2.htm

if (sizewindow){
  if(iIsVrScrollBar==1) { 
   frm.style.height = (frm.contentWindow.document.body.offsetHeight+20); 
   iIsVrScrollBar =  (frm.scrollWidth!=frm.contentWindow.document.documentElement.scrollWidth) ? 1 : 0;
   if(iIsVrScrollBar==0) sizewindow=false;
 }else{
   frm.style.height = (frm.contentWindow.document.body.offsetHeight-10);
   iIsVrScrollBar =  (frm.scrollWidth!=frm.contentWindow.document.documentElement.scrollWidth) ? 1 : 0;
   if(iIsVrScrollBar==1) {frm.style.height = (frm.contentWindow.document.body.offsetHeight+10);}
 }
}