解决iframe滚动条问题

转载 2007年10月11日 15:39:00
解决方案一:

去掉文件开头的文档声明。
不使用"DOCTYPE "文档声明(详细代码在下面)的话很容易就过去了。但是不使用文档声明,一是代码不规范,二是不能获得文档的高度。 下面的代码执行的结果是pageHeight=160px;,而实际上B文件的高度(长度)是800px左右。

var pageHeight = (document.body.clientHeight?document.body.clientHeight:document.documentElement.clientHeight);


--------

有关的文档声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


---------------

解决方案二
在B文档的css里定义body的width<437。但是这样就是固定了,也不太合适。只能用在一个文件里,在另一个文件的iframe 可能宽达500、600,但是B文件却被挤压到450,页面的一边或者两条出现大块的空白。

BODY {...}{
    FONT-SIZE
: 12px;
    width
: 430px;/**//*就是这里了!*/
    margin
:0px;
    padding
:0px;
}

解决方案三:
在B文件的CSS中使用overflow。
使用overflow需要注意以下问题:
1、使用overflow之前看看网页的开头没有没使用文档声明,如果使用了文档声明,那么必须同时定义HTML和BODY两个标记。
2、overflow-x和overflow-y分别定义横向的滚动条和纵向的滚动条,但是它们是IE专有属性,只有在IE(4.0)以上的版本才能使用。
3、overflow-x: hidden;使用之后,有可能会被纵向的滚动条挡住右边一部分内容。

HTML,BODY{...}{
    overflow-x
:hidden;
}

解决方案四:
使用js代码自动调整B文件的宽度,B文件宽度减小之后,横向的滚动条自然就消失了。
注意:
1、
代码里有两段函数都叫expandWindow,你实际上只需要选择其中一个就行了。这只是同一函数的不同版本,上面的版本,我详细说明了每行代码的作用,下面的版本,我简化了一下,显得干净一些。
2、这段代码,是独立运行的,与A、C文件无关与A文件里的iframe的ID是什么也无关。这样的话,就与上面的“B文件部分代码”不完全一样了。“B文件部分代码”需要兼顾A、C两种情况,所以它的代码很复杂。
3、通常情况下,只需要下面这段代码就能解决问题了。推荐您使用下面的代码!

把下面的代码放到B文件(或者其它需要只显示纵向滚动条的网页)里,A网页打开之后,调用B网页,B页面打开之后,自动执行代码,横向滚动条自动消失。
<script language="JavaScript" type="text/javascript">...
//这是一个带说明的版本,后面还有一个非常干净的版本。
function expandWindow()...{//这个函数能调整本页面的宽度
        try...{//使用try{}catch(d){}来捕捉错误,我不喜欢状态栏上那个黄色的惊叹号。
            var pageWidth = 400;//我们将要把网页的宽度改成pageWidth大小。为了防止意外,我暂时将宽度设置为一个比较小的数。
            if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
            
...{//看看能不能取得document.documentElement.clientWidth的大小。
                //document.documentElement.clientWidth = pageWidth;
                //我曾经想过直接修改这个属性,可惜这个属性是只读的,不能斌值。
                //alert(document.documentElement.clientWidth);
                pageWidth = document.documentElement.clientWidth;
            }

            
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
            
...{//尝试获得document.body.clientWidth。
                //document.body.clientWidth = pageWidth;,这条也不行,同样是只读的。
                pageWidth = document.documentElement.clientWidth;
            }
    
            
if(document.body)...{
            
//尝试取得document.body,看看它是不是一个对象。如果它是一个对象object,那么就可以使用.width了。
                if(document.body.style.width<pageWidth)...{//这时再检查一下,是我为了写这篇文章临时添加的。
                    document.body.style.width=pageWidth;//这个width是个读写的属性,修改它,网页的宽度就变了。
                }

            }

            
//alert(pageHeight);//调试程序用的,看看究竟页面被改成多大。
        }
catch(e)...{//捕捉错误
            window.status+=e;//把错误显示在状态栏里
        }

}

//下面是一个简洁、干净的版本。
function expandWindow()...{
    
var pageWidth = 400;
    
if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight))
    
...{
        pageWidth 
= document.documentElement.clientWidth;
    }

    
else if(document.body&&(document.body.clientWidth||document.body.clientHeight))
    
...{
        pageWidth 
= document.documentElement.clientWidth;
    }
    
    
if(document.body)...{
        document.body.style.width
=pageWidth;
    }

}

window.onload
=expandWindow;//当页面全部打开之后执行函数。
</script>
 

浏览器兼容问题项目总结(六) 页面嵌套多个iframe滚动条兼容性修改

最近几天一直在chrome和IE的兼容性问题上花费较多时间,将我在iframe这个问题上的一个坑给大家做个分享。 iframes 提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。但我们需要...
  • u014744118
  • u014744118
  • 2017年04月26日 13:20
  • 1324

easyui tab 加载iframe 高度问题(解决iframe右侧总出两个滚条方法)

问题描述: 浏览器兼容性导致右侧出现双滚动条。 html主要代码: js主要代码: function addTabPage(tabName,tabUrl){...
  • IsITMan
  • IsITMan
  • 2016年11月08日 16:23
  • 2718

iframe高度自适应及隐藏滚动条

在工作中,我们可能会遇到自己公司和其他的公司达成合作关系,从而共同开发某个项目。而这时候,我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下,我们一般都会选择去使用iframe达到我们的目的...
  • qq_33401924
  • qq_33401924
  • 2016年12月22日 09:56
  • 848

iframe 高度100%时,出现垂直滚动条

问题需求是这样的,iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding、margin的因素外,还是有滚动条...
  • wangjun5159
  • wangjun5159
  • 2017年05月21日 20:28
  • 1196

Iframe用法的详细讲解(属性、透明、自适应高度)和html中滚动条属性设置

Iframe 用法的详细讲解和html中滚动条属性设置 scrollbar属性、样式详解 1. overflow内容溢出时的设置(设定被设定对象是否显示滚动条)     overflow-x水平方向内...
  • xiyiyindie
  • xiyiyindie
  • 2016年11月30日 23:03
  • 3112

iframe滚动条设置

iframe滚动条设置 如果untitled3.html页中文字超过一屏的话,就会出现了垂直滚动条,在IE7.FF下都是不出现水平滚动条,但在IE6下会出现. 在网上找了两种方法如下: ...
  • kaishuaige
  • kaishuaige
  • 2013年01月15日 16:56
  • 8122

获取到 Iframe 框架的实际高度,去掉 Iframe 中的滚动条

在介绍中,本文使用了 Jquery ,并且注意,父页面和子页面中都含有 DOCTYPE  在父页面中获取  iframe 内容 的实际高度 var h = $("#test_frame").get(0...
  • xingshi89
  • xingshi89
  • 2015年01月05日 19:09
  • 2692

解决easyui-tabs中使用iframe时出现两个垂直滚动条

最近在使用easyui-tabs加iframe时,出现了两个垂直滚动条的现象,如下图所示 前端代码如下:...
  • zhlantian
  • zhlantian
  • 2017年04月19日 15:27
  • 3020

前后台时间差-父页面获取iframe值-隐藏滚动条-属性选择

一、javascript在前台获取时间后,传给后台,然而后台接收到的时间少了8小时,解决方式:         1.在前台获取是时间加上8小时。         2.如果你是java开发,在框架s...
  • qq_25252769
  • qq_25252769
  • 2017年06月04日 11:33
  • 333

iframe横向滚动条的问题

在主页面加 iframe scrolling="yes" 或 "auto" 去掉子页面里的 横竖都去掉 想到设置b...
  • thingir
  • thingir
  • 2017年01月20日 13:09
  • 193
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决iframe滚动条问题
举报原因:
原因补充:

(最多只允许输入30个字)