IFrame自动适应内容高度，不出现滚动条 - 小黑兔博客 - ITeye博客

`

郁闷的小黑兔

浏览: 28468 次
性别:
来自: 北京

最近访客更多访客>>

烟花1号

若守不弃

happyfling

zdtwyjp

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (14)

社区版块

存档分类

最新评论

mocaoshang：设计模式你讲的太笼统了吧具体的设计模式没讲到怎么运用 ...
Struts2面试题
lijiancool：相当霸道。。
S2SH集成所需包（基础）
郁闷的小黑兔： <div class="quote_title ...
Struts2面试题
韩悠悠：这是struts2的面试题吗？是struts1.x的吧？？？ ...
Struts2面试题

IFrame自动适应内容高度，不出现滚动条

阅读更多

在页面中想要插入一个IFRAME,但需要这个Iframe随着Iframe里的内容高度自动调整高度，这个时候方法有很多种，在这里只给大家介绍其中一种方法，也是比较实用方便的方法。
代码:
将下面JS代码放在<head></head>之间:

<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示例代码为:
<iframe frameborder="0" scrolling="no" name="right" onload="SetCwinHeight(this)" src="页面" width="800">

分享到：

09年java领域j2ee开发主流技术 | 今天电话面试

2010-11-30 10:28
浏览 2577
评论(0)
分类:Web前端
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

iFrame 自动调整高度: ### iFrame自动调整高度知识点详解 #### 一、前言在网页开发中，经常会遇到需要将一个网页嵌入到另一个网页中的场景，这时候就会用到`<iframe>`标签。然而，由于`<iframe>`的高度默认是固定的，在内容发生变化时...

iframe自动适应高度: 当`iframe`中的内容高度不确定时，我们希望`iframe`能自动调整其高度以完全显示内部内容，避免出现滚动条或者内容被截断的情况。以下是一些实现`iframe`高度自适应的方法： 1. **JavaScript解决方案**： - **...

完全搞定iframe（框架）里的滚动条.doc: 当在一个页面（A页面）中使用iframe来加载另一个页面（B页面）时，如果B页面的内容超过了iframe的高度或宽度限制，可能会导致在A页面中出现不必要的滚动条，或者无法正常显示B页面的内容。这种情况下的滚动条问题...

iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题: 然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容动态加载或者变化时，如何让`<iframe>`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...

嵌入到HTML的iframe自动适应大小: 对于iframe而言，这意味着需要一种机制使其能够根据内部内容的变化或者外部容器的尺寸变化来自动调整自己的高度，从而避免出现滚动条或者内容被裁剪的情况。 ### 实现原理自动调整iframe高度的核心在于监听页面...

iframe高度自适应.pdf: 这可能会导致内容溢出或出现滚动条的情况，从而影响用户体验。因此，实现`iframe`的高度自适应变得尤为重要。 #### 实现原理实现`iframe`高度自适应的基本思路是在页面加载完成或者窗口大小发生变化时，通过...

Iframe框架自动适应高度示例详解.pdf: 在一些特殊情况下，我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容，尽管通过OCR扫描技术出现了一些识别错误，但是核心的代码和思路是清晰的，能够帮助我们理解如何实现Iframe高度的自适应。从...

iframe自适应高度: 然而，一个常见的挑战是让`iframe`的高度自适应其内部内容的高度，以免出现滚动条或者内容被截断。本篇文章将深入探讨如何实现`iframe`的自适应高度，以及相关的技术要点。 ### 1. `iframe`基本语法 `iframe`的...

js实现iframe自适应高度: 然而，`iframe` 的一个常见问题是其内容区域的高度可能超过其本身的显示区域，导致滚动条出现或者内容被截断。为了解决这个问题，我们需要让`iframe`能够自适应其内容的高度。本文将详细讲解如何使用JavaScript实现`...

iframe多层级自动适应高度: 总的来说，`iframe`多层级自动适应高度是一个常见的前端问题，通过JavaScript的`postMessage`和事件监听，我们可以实现动态的高度调整，确保用户能完整地查看所有内容。同时，为了提高用户体验，还应考虑优化加载...

iframe高度随子页高度变化: 当我们需要在`iframe`中展示的内容高度不固定时，一个常见的需求就是使`iframe`的高度能自动适应其内嵌页面的高度，以避免滚动条的出现或内容被截断。标题"iframe高度随子页高度变化"和描述中提到的问题，正是关注于...

iframe高度自适应及隐藏滚动条的实例详解: 在网页布局中，`iframe` 的高度如果不能自动适应其内容的高度，可能会导致内容溢出或者出现滚动条。解决这个问题的一种常见方法是通过 JavaScript 来动态调整 `iframe` 的高度。在提供的代码示例中，使用了以下 ...

iframe自适应高度兼容各主流浏览器: iFrame自适应高度是指在网页中嵌入iFrame时，使其高度能够自动适应其内容的高度，从而避免了出现滚动条的问题。下面是实现iFrame自适应高度的方法和相关知识点。知识点1：iFrame的基本概念 iFrame（Inline Frame...

iframe自适应高度和宽度: 然而，在使用`iframe`时，如何使其高度和宽度能够根据内容自动调整，是开发者们经常遇到的问题之一。 #### 一、基本概念在默认情况下，`iframe`的高度和宽度是固定的，需要开发者手动设置。当嵌入的内容发生变化...

JQuery IFrame框架高度自适应（支持嵌套–兼容IE,ff,safafi,chrome）: 然而，由于浏览器的差异性，iframe的高度自动适应并不总是那么简单，尤其是在内容动态加载或页面内容高度不固定的情况下。 jQuery的iframe高度自适应解决方案通常涉及到监听iframe的“load”事件，当iframe内容加载...

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

iframe自适应高度demo: `iframe`的自适应高度是一项关键技术，它确保了嵌入的内容能够完全显示，避免滚动条的出现，从而提供更好的用户体验。 `iframe`的基本语法如下： ```html <iframe src=...

Jquery iframe内部出滚动条: 一个常见的需求是让iframe能够自动调整尺寸，以便其内容能够完整显示，而不需要出现浏览器的滚动条。相反，我们希望页面上出现滚动条，而iframe内部则不需要。为了解决这个问题，我们可以编写相应的Jquery代码，通过...

ext使用--Panel和iframe联合使用时页面高度的解决方法: 然而，由于IFrame内容是异步加载的，Panel可能无法正确预估IFrame的高度，导致滚动条的出现或内容被裁剪。为了解决这个问题，我们可以采取以下策略： 1. **监听IFrame加载事件**：IFrame有一个`load`事件，当...

Global site tag (gtag.js) - Google Analytics