很多做的人都用过IFrame,也常希望能让IFrame自动改变大小,以美化全局效果。以下是两种方法
方法一:(较通用)
<script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
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+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
<iframe id="myTestFrameID"
onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth=0 marginheight=0 frameborder=0
scrolling=no src="/myiframesrc.php"
width=200 height=100></iframe><script language="Javascript">
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
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+FFextraHeight;
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight;
}
}
}
</script>
<iframe id="myTestFrameID"
onload="javascript:{dyniframesize('myTestFrameID');}"
marginwidth=0 marginheight=0 frameborder=0
scrolling=no src="/myiframesrc.php"
width=200 height=100></iframe>
方法二:(较简便)
<IFRAME id=headlogin marginWidth=0 marginHeight=0 src="xxx" frameBorder=0 width=100% scrolling=no height=25 onload="this.height=this.contentWindow.document.body.scrollHeight"></IFRAME>
项目中具体应用
// JavaScript Document
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
//extra height in px to add to iframe in FireFox 1.0+ browsers
var FFextraHeight=getFFVersion>=0.1? 16 : 0
var FFextraWidth=getFFVersion>=0.1? 16 : 0
function dyniframesize(iframename) {
var pTar = null;
if (document.getElementById){
pTar = document.getElementById(iframename);
}
else{
eval('pTar = ' + iframename + ';');
}
if (pTar){
//begin resizing iframe
//delete && !window.opera jenny 090720
pTar.style.display="block";
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){
//ns6 syntax
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight+5+'px';
pTar.width =pTar.contentDocument.body.offsetWidth+FFextraWidth+5+'px';
}
else if (pTar.Document && pTar.Document.body.scrollHeight){
//ie5+ syntax
pTar.height = pTar.Document.body.scrollHeight+5+'px';
pTar.width = pTar.Document.body.scrollWidth+5+'px';
}
}
}
分享到:
相关推荐
iframe 跨域 自动适应高度;iframe 跨域 自动适应高度;
iframe自动适应高度
iFrame 自动调整高度 绝对有效! 分可能是高咯滴滴儿....不过一分钱一分货哈,没效果你骂我、使劲骂!
在用js动态创建时,iframe 很难自动适应高度宽度,写100%也没有,推出此方法可以解决这方面难题
iframe自动适应高度,很难得的资源,很多下载的都是部分浏览器可以用,这个可以兼容360.ie6789等,遨游,火狐。搜狗等浏览器。。亲自测试。
iframe多层级自动适应高度
Iframe框架自动适应高度示例详解.pdf
iframe是网页设计中经常用来装载子页使用的,如何让iframe随着动态装载的子页(主页不刷新)自动适应所装子改变在小是我们经常要处理的问题;现给出两个非常简单的例子,从不同的角度来实现iframe根据最新加载的子页自动...
一些关于iframe自适应高度的介绍,一些关于iframe自适应高度的介绍
这个库允许的高度与同跨域iframe来适应他们所包含的内容的宽度自动调整大小。它最常见的问题与使用iframes提供一系列的功能,其中包括: 高度和宽度大小的iframe内容大小。 作品以多个嵌套的iframe。 跨域iframe域...
动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度 具体实现一: 1、在IFrame的具体页面(就是子页面),添加JavaScript 代码如下: ...
主要介绍了Iframe如何自动适应页面的高度,需要的朋友可以参考下
iframe自适应高度:根据屏幕的高度,自动增减。包括适应浏览器高度的改变。
iframe高度自适应.pdf
在开发项目过程中,用iframe嵌套,会发现一个问题,用iframe嵌套的html结构右边不会自动适应高度。如何解决这一问题呢,下面就跟小编一起来看下吧
通过Div+CSS 结合Jquery制作的具有左侧菜单、导航菜单、下拉菜单、自动适应窗口大小、自动控制iframe高度,动态修改CSS样式,利用CSS的expression表达式,自动调整div大小,实现div左侧跟随的诸多布局应用。
不敢独享,大家要是觉得有用,欢迎使用 源代码如下 代码如下:[removed] //** iframe自动适应页面 **// //输入你希望根据页面高度自动调整高度的iframe的名称的列表 //用逗号把每个iframe的ID分隔. 例如: [...