`
ygsilence
  • 浏览: 336763 次
  • 性别: 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框架高度自适应是一个重要的需求,特别是在内容动态更新或者跨域通信时,确保用户无需滚动两个独立的滚动条来查看全部内容。本篇文章将详细解释如何实现Iframe框架高度自适应,并分析给定代码的工作原理。 ...

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

    本主题聚焦于一个特定的应用场景——"JQuery IFrame框架高度自适应",这是一个常见需求,尤其是在构建跨浏览器的多页面应用时。通过使用jQuery来实现iframe的高度自适应,我们可以确保内容在不同浏览器(包括IE、...

    JAVASCRIPT让IFRAME框架的高度自适应

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

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

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

    Iframe 高度自适应浏览器高度

    标题“Iframe 高度自适应浏览器高度”涉及的核心知识点是如何让Iframe的大小根据其内容自动调整,特别是高度,以便始终保持与浏览器窗口的高度同步,从而提供更好的用户体验。 首先,我们需要了解Iframe的基本结构...

    iframe自适应宽高

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

    iframe跨域嵌套自适应高度

    ### iframe跨域嵌套自适应高度 在网页开发过程中,`iframe`作为一种常见的网页元素,被广泛用于在当前页面中嵌入另一个独立的文档或页面。然而,在实际应用中经常会遇到一些问题,如跨域限制、自适应高度调整以及...

    jquery对iframe自适应高度插件

    这个插件是专门为了解决`iframe`高度自适应的问题而设计的,它允许`iframe`根据其内部内容自动调整高度,确保用户无需滚动就能查看完整内容。该插件在国外被广泛下载和使用,表明了它在实际应用中的高效性和实用性。...

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

    Iframe的高度自适应是一项关键的技术,确保被嵌入的页面能够完全展示,避免出现滚动条或者内容被截断的情况。本文将深入探讨如何使用JavaScript来控制Iframe框架自适应被嵌入页面的高度。 首先,我们要理解为什么...

    iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)

    "iFrame高度自适应终极解决方案(兼容IE7,8,9 Firefox3.6+,Chrome 12+)"这个标题所指向的,就是一种跨浏览器的策略,确保iFrame内容无论何时更新,都能自动调整其高度,从而避免滚动条的出现和内容溢出。...

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的关键知识点主要集中在如何使用JavaScript来处理网页中iframe元素的高度自适应问题。在Web开发中,iframe(Inline Frame)是一种内联框架,常用于在同一个HTML文档中嵌入...

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

    本项目采用了一种常见的布局方式,即左侧固定导航栏,右侧动态显示内容,通过IFrame实现内容区域的高度自适应,并利用JavaScript来调整链接的样式。这种布局方案在很多企业级应用中都得到了广泛应用,因为它的可扩展...

    iframe窗口高度自适应的又一个巧妙实现思路

    本篇文章将详细介绍一种巧妙的实现`iframe`窗口高度自适应的思路。 首先,由于浏览器的同源策略限制,JavaScript无法直接跨域操作DOM元素,包括获取页面高度。为了解决这个问题,我们可以引入一个代理页面(agent....

    再谈iframe自适应高度

    "再谈iframe自适应高度"这个主题,关注的是如何使iframe的内容区域根据所加载页面的高度自动调整,以避免滚动条出现或者内容被截断的问题。在网页设计中,尤其是在构建响应式布局时,这是一个非常关键的优化点。 1....

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

    "Iframe高度自适应(兼容IE/Firefox、同域/跨域)"这一主题是关于如何让内嵌在Iframe中的页面能够根据其内容动态调整自身的高度,确保在不同浏览器(如IE和Firefox)以及处理同域和跨域情况时都能正常显示。...

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

    Iframe的`height`属性决定了其显示区域的高度,当我们想要Iframe内容自适应时,我们需要动态地修改这个属性值,使其等于Iframe内部页面的滚动高度(scrollHeight)。 下面是一个简单的JavaScript函数,用于自动调整...

    js菜鸟笔记之框架高度自适应_ekom.cn

    ### JavaScript 实现 Iframe 高度自适应技术详解 #### 一、背景介绍 在网页设计与开发过程中,经常会遇到需要让一个`&lt;iframe&gt;`标签内的页面内容高度自适应其容器(即父页面)的需求。这主要是为了实现更加美观、...

    IFrame跨域高度自适应实现代码

    然而,当涉及到跨域时,IFrame的高度自适应问题会变得复杂。本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先,我们需要了解什么是跨域。在Web安全策略中,浏览器执行同源策略,这意味着一个网页只能...

    iframe高度自适应

    "iframe高度自适应"就是解决这个问题的关键技术,确保`iframe`的内容区域能够自动调整到其内容的高度,避免滚动条异常和内容显示不全。 一、`iframe`的基本使用 `iframe`标签的基本结构如下: ```html &lt;iframe src=...

    iframe 自适应高度

    2. **访问子框架文档**:由于`iframe`是一个独立的文档,我们需要访问其内部的文档对象模型(DOM),以便读取内部内容的高度。 ```javascript var subWeb = document.frames ? document.frames["iframe1"]....

Global site tag (gtag.js) - Google Analytics