`

iframe 滚动条 自动调整问题

 
阅读更多

不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能,可是 iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦,给iframe设置高度的时候多了也不好,少了更是不行,现在,让我来告诉大 家一种iframe动态调整高度的方法,主要是以下JS函数:
第一种方法:代码简单,兼容性还可以,大家可以先测试下。
复制代码 代码如下:
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win && !window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}

最后,加入iframe,不能丢掉onload属性,当然了,id也必须也函数中的win匹配
复制代码 代码如下:
<iframe width="778" align="center" height="200" id="win" name="win" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="no" src="1.htm"></iframe>

这么的这种也是跟上面的解决方法类似的代码
经典代码 iFrame 自适应高度,在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试。
HTML代码:
复制代码 代码如下:
<iframe src="..." id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>Javascript代码:
<script type="text/javascript" language="javascript">
function iFrameHeight() {
var ifm= document.getElementById("iframepage");
var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;
if(ifm != null && subWeb != null) {
ifm.height = subWeb.body.scrollHeight;
}
}
</script>


下面这个兼容性更好一些
复制代码 代码如下:
<script language="javascript" type="text/javascript">
function dyniframesize(down) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(down);
}
else{
eval('pTar = ' + down + ';');
}
if (pTar && !window.opera){
//begin resizing iframe
pTar.style.display="block"
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight +20;
pTar.width = pTar.contentDocument.body.scrollWidth+20;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
pTar.width = pTar.Document.body.scrollWidth;
}
}
}
</script>
<iframe src ="/default2.aspx" frameborder="0" marginheight="0" marginwidth="0" frameborder="0" scrolling="auto" id="ifm" name="ifm" onload="javascript:dyniframesize('ifm');" width="100%">
</iframe>


另一种情况的iframe解决方案(超简单)
重要提示:src=中你必须填写的网页地址,一定要和本页面在同一个站点上,否则,会抱错,说“拒绝访问!”(实际上这是因为Js的跨域问题导致拒绝访问的)
之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下
1、建立一个bottom.js的文件,然后输入下面的代码(只有两行哦)
复制代码 代码如下:
parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;

这里的 框架ID名 就是Iframe的ID,比如:
复制代码 代码如下:
<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>

2、给你网站里所有的被包含文件里面每个都加入
复制代码 代码如下:
<script language = "JavaScript" src = "bottom.js"/></script>

3、OK,收工!
在WINXP、IE6下面测试通过。很简单吧!
实现 iframe 的自适应高度
实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象。
复制代码 代码如下:
<script type="text/javascript">
//** iframe自动适应页面 **//
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
//定义iframe的ID
var iframeids=["test"]
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide="yes"
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids);
if (dyniframe && !window.opera)
{
dyniframe.style.display="block"
if (dyniframe.contentDocument && dyniframe.contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe.height = dyniframe.contentDocument.body.offsetHeight;
else if (dyniframe.Document && dyniframe.Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe.height = dyniframe.Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids] : document.getElementById(iframeids)
tempobj.style.display="block"
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false)
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize)
else
window.onload=dyniframesize
</script>

第三中方法批量iframe自适应:
工作中遇到iframe随所含内容自适应高度的问题,以前在网上看到过类似问题的解决方法,于是搜索一下,找到了一个比较完整的能够兼容浏览器的解决方法,省得自己写了。
虽然不用自己写,思路还是要明白,基本上就是取得iframe属性src所指定的包含文档中内容的高度,然后用来设置iframe自身的高度,在iframe所在页面载入时对页面中的所有需要自适应高度的iframe进行自动设置,省时省力,如果确定页面中全部iframe都需要自适应高度,直接取得iframe数组给代码,就连ID都不用自己写了,完成程序搞定。(代码贴上来:)
复制代码 代码如下:
<script language="javascript">
//输入你希望根据页面高度自动调整高度的iframe的名称的列表
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。
//定义iframe的ID
var iframeids=["test"];
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var iframehide="yes";
function dyniframesize()
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display="block";
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
tempobj.style.display="block";
}
}
}
if (window.addEventListener)
window.addEventListener("load", dyniframesize, false);
else if (window.attachEvent)
window.attachEvent("onload", dyniframesize);
else
window.onload=dyniframesize;
</script>


网上有人改进了方法,解决了当iframe所包含文档内容高度动态变化时自动调整iframe高度的问题,原理是在iframe所在页面不断扫描iframe包含文档的内容高度并改变iframe自身高度,这种方法貌似解决了问题,但是对页面速度和系统资源占用是否有影响还很难说,感觉方法有些偏执,应该有更好的解决方法。
第四种方法,只针对知道的iframe的ID调用 不推荐
复制代码 代码如下:
function iframeAutoFit(iframeObj){
setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200)
}

使用方法呢,大家在需要自适应的iframe上加个id,然后js执行就可以了

分享到:
评论

相关推荐

    自动调节iframe高度,而不显示其滚动条 js

    js脚本: 自动调节iframe高度,而不显示其滚动条

    iframe自适应宽高

    这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...

    iframeless:自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条

    自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条。 演示 跨浏览器测试 自动调整大小的代码 var iframe = document.querySelector('iframe'); iframe.onload = function() { iframe.height = Math.max...

    iframe-resizer-react:Iframe-Resizer的官方React界面

    iframe尺寸调整器React 该库是用于的官方React接口,该接口可自动调整相同和跨域iFrame的高度和宽度,以适应其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度...

    Iframe 高度自适应(兼容IE/Firefox、同域/跨域)

    随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固定而显示出来的滚动条,不仅影响美观,还会对用 户操作带来不便。于是自动调整iframe的高度就成为本文的重点。 采用JavaScript...

    让iframe自适应高度(支持xhtml)IE firefox兼容

    iframe的高度和宽度可以通过CSS来设置,但是如果我们想要让iframe的高度根据其内容自动调整,则需要使用JavaScript来实现。 在实现让iframe自适应高度时,我们需要考虑到浏览器的兼容性问题。IE和Firefox是两个最...

    如何设置iframe高度自适应在跨域情况下的可用方法

    在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载。iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的...

    如何实现iframe(嵌入式帧)的自适应高度

    好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个...

    VeryIDE Bee 互动营销**台 v1.5 UTF-8.rar

    优化 IE6 兼容性若干问题(打开窗口空白、页面滚动条、右下角小提示变形等) 优化 为部分现代浏览器增加 CSS3 效果,例如圆角、阴影等 优化 后台操作窗口拖动不流畅的问题,以及窗口随屏幕尺寸自适应的问题 优化 ...

    KODExplorer 芒果云-资源管理器

    - 选中文件时,移动到屏幕可视区域(解决上下左右选中文件滚动条不一致问题) ###ver2.51 `2014/6/22` ---- ####fix bug:(bug解决和程序优化) - 登陆多次密码输入错误验证码bug解决 - 修复漏洞:创建副本加入...

    《程序天下:JavaScript实例自学手册》光盘源码

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    程序天下:JavaScript实例自学手册

    17.8 窗体滚动条随文字增加自动滚动 17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码(二) 18.3 在线测试...

    设计技巧大放送——滚动的嵌入框架页面.pdf

    通过使用 JavaScript,让页面能够自动滚动,实现嵌入框架页面的内容完全显示。代码如下: ``` &lt;iframe id=''datamain'' src=''exter nal....

    todoist-gmail-sidebar:Chrome 侧边栏扩展程序(用于 Gmail 中的 Todoist)

    todoist-gmail-边栏 厌倦了缺少 Google 小工具,我完全忽略了...修复 html 元素不会自动调整大小的 OS X 问题 找到一种方法来确保所有站点的滚动条都正确定位 优化流畅的 jquery 动画 调查潜在的框架焦点和过度滚动问题

    IBM WebSphere Portal门户开发笔记01

    75、IFRAME滚动条样式 353 76、JS键盘事件 355 77、JS鼠标事件大全 355 78、JS滚动条滚动时监听 360 79、FRAMESET结构 361 80、设置SELECT为列表结构 361 81、JS获取鼠标位置 364 82、JS EVENT获取获取标签尺寸S 365...

    ExtAspNet_v2.3.2_dll

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正了使用IFrameUrl的Tab在切换过程中会重复加载的问题,这是一个在v2.1.6引入的问题(feedback:eroach)。 -修正了启用AutoPostBack的Grid,其RowClick会覆盖LinkButtonField, HyperLinkField, CheckBoxField的...

    网际畅游 MyIE 3.0 源代码

    自适应标签会根据标签数量自动调整标签的宽度,使他们尽量保持在一行内。 图标化的进度显示: 在浏览时每个标签旁都有一个小图标来显示该页当前的下载进度。 当图标为白色时进度在0%-25%之间,当蓝色区域占四分...

    超实用的jQuery代码段

    5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    2) 修正控件在浏览器滚动条下端位置时弹出DIV窗口会出现显示位置有误的BUG。 3) 修改原ImgPathType属性名称为PathType,并且路径形式的切换对插入文件路径和插入图片路径都生效(原来的属性仅对图片路径生效)。...

Global site tag (gtag.js) - Google Analytics