`
leyoo
  • 浏览: 44447 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

Iframe框架高度自适应的实现

阅读更多
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()
{
try
{
if(window!=parent)
{
var a = parent.document.getElementsByTagName_r("IFRAME");
//返回一个有特定标签名称(iframe)的子元素列表,是数组对象。
for(var i=0; i<a.length; i++)
{
if(a[i].contentWindow==window)//contentWindow属性是指指定的frame或者iframe所在的window对象
{
 
var h1=0, h2=0, d=document, dd=d.documentElement;
a[i].parentNode.style.height = a[i].offsetHeight +"px";
//parentNode 属性:传回目前节点的父节点.
//offserHeaight 属性:表示课件高度
a[i].style.height = "10px";
 
if(dd && dd.scrollHeight) h1=dd.scrollHeight;//scrollHeight属性:网页正文全文高
if(d.body) h2=d.body.scrollHeight;
var h=Math.max(h1, h2);//取得最大值
 
if(document.all){h += 0;}
if(window.opera){h += 1;}//修正在opera浏览器
a[i].style.height = a[i].parentNode.style.height = h +"px";
}
}
}
}
catch (ex){}
}
if(window.attachEvent)
{
window.attachEvent("onload", iframeAutoFit);
//页面加载完后执行LoadImg函数
}
else if(window.addEventListener)//兼容ff
{
window.addEventListener('load', iframeAutoFit, false);
}
分享到:
评论

相关推荐

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

    本篇文章将详细解释如何实现Iframe框架高度自适应,并分析给定代码的工作原理。 首先,我们来理解一下给定代码的核心部分。这段JavaScript代码的作用是在父页面中检测并调整Iframe的高度,使其与内容的实际高度保持...

    JAVASCRIPT让IFRAME框架的高度自适应

    通过使用JavaScript来让IFRAME框架的高度自适应,我们可以实现IFRAME框架的高度自动调整,以提高用户体验。同时,我们也可以使用这个方法来实现其他类型的高度自动调整,以满足不同的需求。 在实际应用中,我们可以...

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

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

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

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

    Iframe 高度自适应浏览器高度

    然而,当Iframe的内容动态变化或者内容长度超过预设的高度时,我们就需要实现高度自适应。有几种常见的方法可以实现这一目标: 1. **JavaScript/jQuery**: 一种常见的方法是使用JavaScript或jQuery监听页面的...

    iframe跨域嵌套自适应高度

    本文将详细介绍如何实现`iframe`跨域嵌套下的自适应高度调整,并讨论如何解决因跨域嵌套而可能引起的`session`丢失问题。 #### 一、`iframe`自适应高度原理与实现 1. **基本概念**: - **`iframe`**:`iframe`即...

    iframe自适应宽高

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

    jquery对iframe自适应高度插件

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

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

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

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

    `sandbox`属性可以启用或禁用iFrame的一些安全特性,如JavaScript执行,这可能影响到高度自适应的实现。 7. **兼容性处理**: 针对IE7、8、9,可能需要使用特定的JavaScript库或技巧,如jQuery的`.height()`方法...

    iframe自适应高度.rar

    【标题】:“iframe自适应高度.rar”涉及到的...总的来说,"iframe自适应高度.rar"这个主题涵盖了iframe的使用、同源策略的理解以及JavaScript实现iframe高度自适应的技术细节,这些都是前端开发中非常实用的知识点。

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

    本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先,我们需要了解什么是跨域。在Web安全策略中,浏览器执行同源策略,这意味着一个网页只能访问与之同源(协议、域名、端口相同)的IFrame内容。但当...

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

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

    再谈iframe自适应高度

    - 文件`iframe_a.htm`、`iframe_b.htm`、`iframe_c.htm`可能分别展示了不同的iframe自适应高度的实现方案或示例。例如,`iframe_a.htm`可能是纯JavaScript实现,`iframe_b.htm`可能是基于jQuery的,而`iframe_c....

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

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

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

    本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。 首先,理解基本概念。Iframe的`height`属性决定了其显示区域的高度,当我们想要Iframe内容自适应时,我们需要动态地修改这个属性值,使其等于...

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

    而跨域则需要考虑浏览器的同源策略限制,为了实现高度自适应,可能需要使用window.postMessage方法进行跨域通信,将Iframe内部的尺寸信息传递给父页面。 5. **源码分析**: - `iframe.html`可能是一个包含了Iframe...

    iframe 自适应高度

    ### iframe自适应高度实现方法详解 在网页设计与开发中,`iframe`(Inline Frame)是一种常用的HTML元素,用于在当前文档中嵌入另一个HTML文档。然而,在实际应用过程中,经常会遇到`iframe`内容高度固定导致页面...

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

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

    iframe高度自适应

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

Global site tag (gtag.js) - Google Analytics