转自:http://hi.baidu.com/ssitn/blog/item/c6f1e954ee6e6054d0090664.html
在页面中使用iframe时,对其高度的控制十分头疼,试验了别人介绍的各种方法,终于找到一个比较完美的解决方法。
这个方法来自:JavaScript分享网 http://www.sharejs.com/showdetails-904.aspx
简介:在一个页面里调用另外iframe子页面,可以通过javascript在父页面直接控制子页面的高度,无需在子页面添加任何代码,非常好用。
兼容性:IE6+ FireFox2+ Opera9+ 更新时间:2009-7-31
<script type="text/javascript">
/******************************************************
*
让iframe自动调整高度的方法
Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序,请保留此声明
* 获取此脚本以及更多的JavaScript程序,请访问 http://www.ShareJS.com
******************************************************/
function SetCwinHeight(){
var sharejs_frame=document.getElementById("sharejs_frame"); //iframe id
if (document.getElementById){
if (sharejs_frame && !window.opera){
if (sharejs_frame.contentDocument && sharejs_frame.contentDocument.body.offsetHeight){
sharejs_frame.height = sharejs_frame.contentDocument.body.offsetHeight;
}else if(sharejs_frame.Document && sharejs_frame.Document.body.scrollHeight){
sharejs_frame.height = sharejs_frame.Document.body.scrollHeight+30;
}
}
}
}
</script>
<iframe width="100%" id="sharejs_frame" onload="SetCwinHeight()" height="0″ frameborder="0″ src="frame.html" scrolling="no"></iframe>
效果的确不错。
分享到:
相关推荐
iFrame 自动调整高度 绝对有效! 分可能是高咯滴滴儿....不过一分钱一分货哈,没效果你骂我、使劲骂!
iframe自动改变高度 朝好用的一个框架 我就在用
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
iframe是网页设计中经常用来装载子页使用的,如何让iframe随着动态装载的子页(主页不刷新)自动适应所装子改变在小是我们经常...现给出两个非常简单的例子,从不同的角度来实现iframe根据最新加载的子页自动调整高度.....
js脚本: 自动调节iframe高度,而不显示其滚动条
做子页面时经常碰到iframe无法自动调整高度显示问题,本js解决此问题,通用支持各主流浏览器
怎样用一个函数,自动调整这个页面里所有iframe的高度呢? function change_size(iframe) { iframe.style.height=info_content.document.body.scrollHeight+1+”px”; } 我用过这种方式,但是等号后面的第一个对象...
但是问题也来的iframe的高度是固定的不能与第三方网站很好的融合,又例如第三方网站使用了瀑布流插件,要滚动加载自动计算高度,那么先说跨域:iframe主域名不同跨域方法,假如网站 A.com B.com A 里面放入一个...
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $(#iframeId).load(function () { var ...
iframe的高度需要根据子页面的实际高度来进行调整。如果iframe的高度小于子页面的实际高度,超出的部分无法显示;相反,如果iframe的高度过高,则页面上会出现大量的空白区域。我们可以通过属性或者CSS来设置iframe...
自动调整 iframe 的大小以匹配其内容的高度并且根本没有滚动条。 演示 跨浏览器测试 自动调整大小的代码 var iframe = document.querySelector('iframe'); iframe.onload = function() { iframe.height = Math.max...
iframe调整大小 一个简单的实用程序,可将iframe调整为其内容的大小。 用法 $('iframe').iframeResize(); 这会将加载事件处理程序...iframeResize-min-height可用于为iframe设置默认高度,并在加载内容时自动将其删除。
于是自动调整iframe的高度就成为本文的重点。 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键,同时由于JavaScript对不同域名下权限的控制,引 发出同域、跨域两种情况。 同域时Iframe高度自适应 ...
iFrame Resizer V4 通过该库,可以自动调整相同和跨域iFrame的高度和宽度的大小,以适合其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame调整为内容大小的高度和宽度。 适用...
iframe尺寸调整器React 该库是用于的官方React接口,该接口可自动调整相同和跨域iFrame的高度和宽度,以适应其包含的内容。 它提供了一系列功能来解决使用iFrame时最常见的问题,其中包括: 将iFrame的高度和宽度...
重力式Iframe附加组件 在任何网站上的iframe中嵌入重力表单。... 另外,只要表单高度发生变化,iframe就会自动调整大小,例如,由于条件逻辑而显示或隐藏字段时。 产品特点 有选择地启用嵌入单个表格。 自动调整ifr
通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度,动态修改CSS样式,利用CSS的expression表达式,自动调整div大小,实现div左侧跟随的诸多布局应用。
不敢独享,大家要是觉得有用,欢迎使用 源代码如下 代码如下:[removed] //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: [...