javascript - 检查 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：元素.scrollHeight

如果元素的内容生成了垂直滚动条，则 scrollHeight 值等于元素需要的最小 clientHeight 以便在不使用垂直滚动条的情况下适应视点中的所有内容。当一个元素的内容不生成垂直滚动条时，它的 scrollHeight 属性等于它的 clientHeight 属性。这可能意味着内容太短而无法使用滚动条，或者元素的 CSS 样式溢出值为可见（不可滚动）。

Answer 3

我不得不修改代码以使其正常工作。

1) IFRAME 和内容在同一个网站/文件夹结构上

2) 通过将“sizewindow”设置为 TRUE 来启动该过程

3) 它片段是设置在 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);}
 }
}