`
ygsilence
  • 浏览: 333233 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Iframe框架高度自适应

    博客分类:
  • JS
阅读更多
(一)	Iframe框架高度自适应的实现
Iframe框架高度自适应的实现,一个很牛的团队写的,简单的说就是 在A.html中iframe引用B.htm(高度是不断变化的)并且自适应高度.网上也有很多方法,但是有些不全兼容ie6,ie7,ff,opera,在此贴下兼容ie6,ie7,ff,opera下的高度自适应的代码,并且已经封装好,只需要在被引用的页面加入这段代码<script type=”text/javascript” src=”iframeAutoFit.js” mce_src=”iframeAutoFit.js”></script> 
function iframeAutoFit() 
1.	{ 
2.	try 
3.	{ 
4.	if(window!=parent) 
5.	{ 
6.	var a = parent.document.getElementsByTagName("IFRAME"); 
7.	//返回一个有特定标签名称(iframe)的子元素列表,是数组对象。 
8.	for(var i=0; i&lt;a.length; i++) 
9.	{ 
10.	if(a[i].contentWindow==window)//contentWindow属性是指指定的frame或者iframe所在的window对象 
11.	{ 
12.	
13.	var h1=0, h2=0, d=document, dd=d.documentElement; 
14.	a[i].parentNode.style.height = a[i].offsetHeight +"px"; 
15.	//parentNode 属性:传回目前节点的父节点. 
16.	//offserHeaight 属性:表示课件高度 
17.	a[i].style.height = "10px"; 
18.	
19.	if(dd &amp;&amp; dd.scrollHeight) h1=dd.scrollHeight;//scrollHeight属性:网页正文全文高 
20.	if(d.body) h2=d.body.scrollHeight; 
21.	var h=Math.max(h1, h2);//取得最大值 
22.	
23.	if(document.all){h += 0;} 
24.	if(window.opera){h += 1;}//修正在opera浏览器 
25.	a[i].style.height = a[i].parentNode.style.height = h +"px"; 
26.	} 
27.	} 
28.	} 
29.	} 
30.	catch (ex){} 
31.	} 
32.	if(window.attachEvent) 
33.	{ 
34.	window.attachEvent("onload", iframeAutoFit); 
35.	//页面加载完后执行LoadImg函数 
36.	} 
37.	else if(window.addEventListener)//兼容ff 
38.	{ 
39.	window.addEventListener('load', iframeAutoFit, false); 
40.	} 

如何实现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[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框架高度自适应的实现.doc

    Iframe框架高度自适应的实现.doc

    JAVASCRIPT让IFRAME框架的高度自适应

    让IFRAME框架的高度自适应页面 在网页开发中,使用IFRAME框架来嵌套其他网页内容是一种常见的做法。但是,IFRAME框架的高度无法自动调整以适应页面内容的变化,这就会导致用户体验不佳。为了解决这个问题,我们可以...

    JQuery IFrame框架高度自适应(支持嵌套–兼容IE,ff,safafi,chrome)

    NULL 博文链接:https://z-one.iteye.com/blog/1725511

    iframe自适应宽高

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

    Iframe 框架自适应被嵌入页面高度

    js控制 Iframe 框架自适应被嵌入页面高度

    .net 网页的布局框架 iframe自适应高度 js设置链接样式

    网站实现了网页的布局,左边固定,点击左边的链接,在右边显示相应信息,iframe自适应高度,用js更改链接样式。网站是本人在练习的时候弄的,页面简单,功能实现了。看了就明白了。 vs2005的

    js实现iframe自动自适应高度的方法

    主要介绍了js实现iframe自动自适应高度的方法,涉及javascript操作iframe框架的技巧,非常具有实用价值,需要的朋友可以参考下

    iframe自适应高度(兼容目前所有主浏览器)

    iFrame 自适应高度(兼容所有主浏览器) iFrame 自适应高度是前端开发中常见的问题,很多开发者在搜索引擎中搜索相关解决方案,但大多数文章只能解决静态高度的问题,而忽视了 JS 操作 DOM 之后的动态同步问题。...

    iframe框架使用(完美版)

    iframe使用 自适应高度 封装js

    JS实现iframe自适应高度的方法示例

    本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考,具体如下: &lt;iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling=...

    关于IFRAME 自适应高度的研究

    关于IFRAME 自适应高度的研究——之前自己也碰到过这个问题,为了得到答案去网上搜索,发现有不少人也遇到了这样的问题,现在就把解决方法共享一下。 重要提示:src=中你必须填写的网页地址,一定要和本页面在同一...

    自适应高度框架 —-属个人收藏内容

    main.htm: &lt;... &lt;head&gt; &lt;... charset=gb2312′ /&gt; &lt;... &lt;...iframe自适应加载的页面高度&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;iframe src=”child.htm”&gt;&lt;/i

    基于jquery的兼容各种浏览器的iframe自适应高度的脚本

    就是绑定事件必须在iframe加载完毕之前绑定,否则不会执行。 以下是jQuery,load事件的概述 在每一个匹配元素的load事件中绑定一个处理函数。 如果绑定给window对象,则会在所有内容加载后触发,包括窗口,框架,对象...

    iframe标签用法详解(属性、透明、自适应高度)

    iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。 HTML 与 XHTML 之间的差异 在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支持 iframe 元素。 提示和注释: 提示:您可以把需要的文本...

    artDialog_Demo

    25、可以自适应iframe内容的大小(不跨域的前提下) 26、对超过预设面积大小的对话框拖动自动采用替身的方式,以求拖动更流畅 27、新增加一个'data'的接口,它保存了你对话框每次创建的消息对象 (操作iframe消息...

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

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

    ExtAspNet_v2.3.2_dll

    -修正Form不能自适应浏览器大小的改变(feedback:kaywood)(WorkItem#6309)。 -增加重载方法Alert.Show(message, title, icon)(feedback:TheBox)(WorkItem#6353)。 -为容器控件(比如Panel,Region,Tab等)增加AJAX...

    超实用的jQuery代码段

    1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口模式 1.21 实现类...

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

    5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不...

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

    5.6 动态添加iframe框架 5.7 用层实现长文章分页 5.8 iframe自适应高度 5.9 类似MSN的消息提示 5.10 只打印iframe的内容 第6章 下拉列表特效 6.1 下拉框实现多选 6.2 实现两个select的同步 6.3 被选中的列表项下次不...

Global site tag (gtag.js) - Google Analytics