`
lgf444
  • 浏览: 81000 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
最近访客 更多访客>>
社区版块
存档分类
最新评论

iframe页面调用高度自适应方法代码,兼容IE,FF

    博客分类:
  • js
阅读更多

有时在项目中会遇到通过在页面中采用iframe的方式include其它页面,这时就会考虑不要因出现滚动条而影响页面效果,但include页面的内容高度是未知的,所以大家都会利用javascript来解决这个问题。
在网上曾看见过解决此问题的代码,不过拷贝到本地进入调试时有些不正常,在IE下无法正确获得嵌套页面的高度,最终代码如下:

<script type="text/javascript"> 
function SetCwinHeight(iframeObj){ 
  if (document.getElementById){ 
   if (iframeObj && !window.opera){ 
    if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight){ 
     iframeObj.height = iframeObj.contentDocument.body.offsetHeight; 
    }else if(document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight){ 
     iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight; 
    } 
   } 
  } 
} 
</script> 
<iframe width="100%" name="frameContent" onload="SetCwinHeight(this)" frameborder="0" src="http://www.56ui.com"></iframe>

 



扩展:

在一个页面含有某个iframe,其id="myframe" name="myframe",此时使用document.getElementById("myframe")取到的是iframe标签对象,通过该对象可以获取iframe的各个属性,例如src、frameborder、style等等,但是不能获取到iframe所包含的子页面的各个对象。如果使用document.frames("myframe")取到的是iframe组件对象,通过该对象可以获取到iframe所包含的页面的子页面的各个对象,例如子页面的window对象,但是不能获得iframe标签得各个属性,例如上面说到的src等等。

分享到:
评论

相关推荐

    iframe自动适应高度(完美自适应高度嵌套代码),兼容目前主流浏览器。

    标题提到的“iframe自动适应高度(完美自适应高度嵌套代码)”提供了一个解决方案,它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度,包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...

    jsp页面iframe高度自适应的js代码.docx

    jsp 页面 iframe 高度自适应的 js 代码详解 jsp 页面 iframe 高度自适应的 js 代码是指在 jsp 页面中使用 iframe 元素,並且使其高度能够自适应内容的高度。这种技术在实际应用中非常有用,例如在某些网页中,我们...

    iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

    此外,由于跨域安全限制,`&lt;iframe&gt;`内页面与父页面可能无法进行通信,这会影响高度自适应功能的实现。确保`&lt;iframe&gt;`加载的页面与包含它的页面位于相同的源(协议+域名+端口)下,或者`&lt;iframe&gt;`加载的页面明确通过...

    JAVASCRIPT让IFRAME框架的高度自适应

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

    iframe根据页面内容自适应高度和宽度

    本篇文章将详细探讨如何实现`iframe`根据页面内容自适应高度和宽度。 首先,我们需要理解`iframe`的基本结构。一个简单的`iframe`标签如下: ```html &lt;iframe src=...

    用jquery实现iframe高度自适应实例代码完美兼容多数浏览器

    接着,我们在页面加载完成时和窗口大小改变时调用这个方法,确保在任何情况下`iframe`都能正确调整高度。如果`iframe`的内容加载有延迟,我们还可以通过监听`load`事件,在内容完全加载后进行调整。 此解决方案考虑...

    iframe页面的高度iframe高度自适应

    iframe包含的页面的高度,兼容性好,iframe高度自适应

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

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

    iframe自适应高度(兼容多种浏览器)

    2. **事件监听**:除了在页面加载完成后调用调整高度的方法外,还应该监听窗口的`resize`事件,以便在窗口大小改变时重新计算`iframe`的高度。 3. **错误处理**:在某些情况下,如`iframe`加载失败或内容为空时,...

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

    通过使用jQuery来实现iframe的高度自适应,我们可以确保内容在不同浏览器(包括IE、Firefox、Safari和Chrome)中的显示一致性,无论iframe内嵌的页面有多复杂。 首先,我们需要理解iframe的基本概念。IFrame,即...

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

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

    iframe高度自适应,多浏览器兼容

    `iframe`的使用涉及到许多关键点,尤其是高度自适应和多浏览器兼容性,这在实际项目中至关重要。本篇文章将详细讲解如何实现`iframe`的高度自适应以及在不同浏览器之间的兼容性处理。 一、`iframe`基本使用 `iframe...

    iframe高度自适应代码及演示页面

    iframe高度自适应代码及演示页面。 适合新手,用到iframe,并且需要高度自适应的人士。 老手自动绕行,又没什么技术含量。。。 解压之后,打开iframe-auto.html之后查看效果. 如果不能查看,检查是否允许执行js

    iframe高度自适应.pdf

    实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时,通过JavaScript动态计算嵌入内容的实际高度,并相应地调整`iframe`的高度。这种方法的核心在于编写合适的JavaScript函数来获取嵌入内容的...

    Iframe 高度自适应,js控制Iframe 高度自适应.docx

    在浏览器兼容性方面,需要考虑 Firefox、IE、Opera 等不同的浏览器,并且需要使用不同的方法来实现 iframe 高度的自适应。 在实际应用中,需要根据具体情况选择合适的方法来实现 iframe 高度的自适应,以确保 ...

    iframe跨域嵌套自适应高度

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

    iframe高度自适应

    总结,`iframe`高度自适应是前端开发中的常见问题,解决这个问题需要根据实际情况选择合适的方法,包括利用CSS、JavaScript、`window.postMessage` API,以及处理IE浏览器的兼容性问题。在实际操作中,一定要注意...

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

    例如,可以监听窗口的resize事件,并通过`contentWindow.document.body.scrollHeight`获取到Iframe内的页面高度,然后设置Iframe的高度为这个值。 3. **浏览器兼容性**: - IE和Firefox对于Iframe的处理方式略有...

    解决IE,Firefox,chrome,safari浏览器中iframe显示高度自适应问题

    ### 解决IE、Firefox、Chrome、Safari浏览器中iframe显示高度自适应问题 在Web开发中,`iframe`(Inline Frame)元素常被用于嵌入另一个HTML文档到当前页面中,这种技术为开发者提供了极大的便利,例如加载广告、...

    完美解决跨域iframe的高度自适应

    完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应,嵌入几个页面解决跨域iframe的高度自适应。。。

Global site tag (gtag.js) - Google Analytics