- 浏览: 60247 次
- 性别:
- 来自: 大连
文章分类
最新评论
进行网页设计时,由于网站的海量信息以及标准化的网页制作模式,使得框架网页嵌套成为了首选。这种方式的优越性不仅体现在整个网页整体性的保持及更新上,而且还可以使网站的维护变的相对容易。
基于界面美观和交互的考虑,在网页制作中隐藏Iframe的border和scrollbar,让人看不出它是个Iframe,而不带边框的Iframe因为能和网页无缝的结合从而在不刷新页面的情况下使更新页面的部分数据成为可能。
如果Iframe始终调用同一个固定高度的页面,我们直接写死Iframe高度就可以了。由于Iframe要切换页面,或者被包含页面要做动态操作,这时候,就需要程序去同步Iframe高度和被包含页的实际高度了,而Iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦 : 给Iframe设置高度多了的时候会使网页下方出现空白,少了则只能显示部分网页。
于是在实际工作当中,我总结了一种Iframe动态调整高度的方法,即实现 Iframe 的自适应高度,能够随着页面的长度自动适应以免除页面和 Iframe 同时出现滚动条的现象。
现在就把解决方法共享一下:
方法:</strong>在主页面Iframe的onload事件中执行JS,去取得被包含页的高度,然后去同步高度。并在主窗口做一个Interval,不停的来获取被包含页的高度。当Iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,添加 onload="this.height=100",让页面加载的时候先缩到足够矮,然后再同步到一样的高度。
代码如下所示:
<Iprame src="a.html" name="a" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" id="a" onload="this.height=100" style="WIDTH:100%"></Iframe>
//height=100这个数值可以根据需要自行设置,即页面加载时显示的最小高度。
<script type="text/javascript">
function reinitIframe(){
var Iframe = document.getElementById("a");
try {
//声明变量取值
var bHeight =iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);//取最大值
iframe.height = height;
} catch (ex) {
}
}
window.setInterval("reinitIframe()", 200);
</script>
因此,应用此段代码即可解决Iframe自适应高度的问题。
基于界面美观和交互的考虑,在网页制作中隐藏Iframe的border和scrollbar,让人看不出它是个Iframe,而不带边框的Iframe因为能和网页无缝的结合从而在不刷新页面的情况下使更新页面的部分数据成为可能。
如果Iframe始终调用同一个固定高度的页面,我们直接写死Iframe高度就可以了。由于Iframe要切换页面,或者被包含页面要做动态操作,这时候,就需要程序去同步Iframe高度和被包含页的实际高度了,而Iframe的大小却不像层那样可以“伸缩自如”,所以带来了使用上的麻烦 : 给Iframe设置高度多了的时候会使网页下方出现空白,少了则只能显示部分网页。
于是在实际工作当中,我总结了一种Iframe动态调整高度的方法,即实现 Iframe 的自适应高度,能够随着页面的长度自动适应以免除页面和 Iframe 同时出现滚动条的现象。
现在就把解决方法共享一下:
方法:</strong>在主页面Iframe的onload事件中执行JS,去取得被包含页的高度,然后去同步高度。并在主窗口做一个Interval,不停的来获取被包含页的高度。当Iframe窗体高度高于文档实际高度的时候,高度取的是窗体高度,而当窗体高度低于实际文档高度时,取的是文档实际高度。因此,要想办法在同步高度之前把高度设置到一个比实际文档低的值。所以,添加 onload="this.height=100",让页面加载的时候先缩到足够矮,然后再同步到一样的高度。
代码如下所示:
<Iprame src="a.html" name="a" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" id="a" onload="this.height=100" style="WIDTH:100%"></Iframe>
//height=100这个数值可以根据需要自行设置,即页面加载时显示的最小高度。
<script type="text/javascript">
function reinitIframe(){
var Iframe = document.getElementById("a");
try {
//声明变量取值
var bHeight =iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);//取最大值
iframe.height = height;
} catch (ex) {
}
}
window.setInterval("reinitIframe()", 200);
</script>
因此,应用此段代码即可解决Iframe自适应高度的问题。
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1214<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 563CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1011script代码: <script type=" ... -
html之marquee详解
2014-03-28 10:07 600该标签不是HTML3.2的一部分,并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 18431。html中a标签的四个属性书写是有顺序的,如果顺序不对,显 ... -
修改360浏览器内核
2014-03-10 17:19 1884浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 714有时候,为了网页设计的美观,需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1176<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 616对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1808开始运行输入C:\Windows\System32\gpedi ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 893<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 535■ 框架概念 : 所谓框架便是网页画面分成几个框窗,同时取得 ... -
顶部浮动
2013-11-29 09:37 407<!DOCTYPE html PUBLIC " ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 503很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现 ... -
转 CSS hack:针对IE6,IE7,firefox显示不同效果
2013-09-05 13:55 962CSS hack:针对IE6,IE7,firefox显示不同效 ... -
white-space:
2013-08-30 10:57 452定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1140{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 538<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 737所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同 ... -
如何在页面中设置IE浏览器的文档模式
2013-08-04 12:58 1052如何在页面中设置IE浏 ...
相关推荐
iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度iframe 自适应高度
Iframe自动根据类容改变自己的大小,解决Iframe设置高度后无法缩小!拜一个高人所赐,特表示感谢!
iframe自适应高度和宽度
iframe自适应高度的简单解决办法,word文档中有详细的解释,赶快下载吧!
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe自适应高度说明文档iframe...
纯JS实现的iframe自适应高度。兼容主流浏览器。
iframe自适应高度(兼容多种浏览器) 亲测可以
多层嵌套iframe 自适应高度的解决方法
jquery对iframe自适应高度插件是国外下载下来的。插件使用只要引用js文件就行,不用做任何别的操作完全自动化。
iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板 iframe 跨域 自适应高度 模板
iframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txtiframe自适应高度 .txt
iframe自适应高度
javascript iframe 自适应高度js demo
iframe自适应高度 .doc
因为有一个项目要用到iframe自适应高度,网上搜索了以下结果无数,不过看来看去都是那几个,而且基本都测试了一遍,所说的兼容根本不是那么回事,要不IE不正常,要不其他浏览器显示不正常,最后无奈,综合网上的方法...
介绍: 填写的嵌入地址一定要和本页面在同一个站点上,否则会提示“拒绝访问!”。对跨域引用有权限问题,请查阅其他资料。
iframe自适应高度(DOM动态操作)
iframe自适应高度:根据屏幕的高度,自动增减。包括适应浏览器高度的改变。