`
royzhou1985
  • 浏览: 254452 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

iframe 自适应高度

HTML 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
		<title>a</title>
	</head>
	<body>
		<div style="border:1px dotted;width:400px">
			<iframe id="child" src="child.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>
		</div>
		<script type="text/javascript">
			function reinitIframe(){
				var iframe = document.getElementById("child");
				try{
					var bHeight = iframe.contentWindow.document.body.scrollHeight;
					var dHeight = iframe.contentWindow.document.documentElement.scrollHeight; 
					var height = Math.max(bHeight, dHeight); //取二者之间的最大值
					iframe.height =  height;
				}catch (ex){
				}
			}
			/* 
			   定时调整大小,
			   比如按钮触发div的显示可能会引起页面高度的变化,
			   需要实时调整
			*/
			window.setInterval("reinitIframe()", 200); 
		</script>
	</body>
</html>
分享到：
| Jbpm 任务
评论
发表评论

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

相关推荐

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

    ### iframe自适应高度(兼容多种浏览器) 在网页开发过程中，`iframe`是一种常用的元素，用于在当前页面中嵌入另一个HTML文档。然而，默认情况下，`iframe`的高度是固定的，这可能会导致内容显示不完全或者出现不必要...

    iframe自适应高度.rar

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

    再谈iframe自适应高度

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

    iframe自适应高度和宽度

    ### iframe自适应高度和宽度详解 在Web开发中，`iframe`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。它能够实现页面内部局部刷新的效果，广泛应用于各种复杂的网页布局中。然而，...

    多层嵌套iframe 自适应高度的解决方法

    多层嵌套iframe 自适应高度的解决方法

    iframe自适应高度兼容各主流浏览器

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

    jquery对iframe自适应高度插件

    为了解决这个问题，`jQuery`提供了一个专门的插件——"jquery对iframe自适应高度插件"。 这个插件是专门为了解决`iframe`高度自适应的问题而设计的，它允许`iframe`根据其内部内容自动调整高度，确保用户无需滚动就...

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

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

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

    然而，`&lt;iframe&gt;`的高度自适应问题常常困扰着开发者，尤其是当`&lt;iframe&gt;`内部的内容动态加载或者变化时，如何让`&lt;iframe&gt;`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...

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

    在探讨“基于jQuery的兼容各种浏览器的iframe自适应高度的脚本”这一主题时，我们首先需要理解几个关键概念：iframe、自适应高度以及jQuery。 ### 1. iframe概述 iframe，即Inline Frame，是HTML中一个用于在当前...

    iframe自适应高度，亲测完美兼容IE6-9,Chrome,Opera,firefox,safari

    因为有一个项目要用到iframe自适应高度，网上搜索了以下结果无数，不过看来看去都是那几个，而且基本都测试了一遍，所说的兼容根本不是那么回事，要不IE不正常，要不其他浏览器显示不正常，最后无奈，综合网上的方法...

    iframe自适应高度说明文档

    ### iframe自适应高度详解 在网页开发中，`iframe`是一种常用的技术，用于在一个HTML页面中嵌入另一个HTML页面。然而，默认情况下，`iframe`的高度是固定的，这可能导致页面布局问题，尤其是当嵌入的内容高度不确定...

    iframe自适应高度的简单解决办法

    在网页设计中，`iframe`（Inline Frame）是一种嵌入其他网页或内容的标签，它允许我们在一个页面中展示多...通过下载提供的`iframe自适应高度.doc`文档，你可以得到更详细的步骤和解释，以便更好地理解和应用这些技术。

    iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。

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

    iframe自适应高度（DOM动态操作）

    ### iframe自适应高度（DOM动态操作） #### 概述 在网页开发中，`iframe`是一种常用的技术，用于在一个HTML页面中嵌入另一个HTML页面。然而，在实际应用中经常会遇到一个问题：即`iframe`的高度与内嵌页面的实际...

    iframe自适应宽高

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

    js实现iframe自适应高度

    本文将详细讲解如何使用JavaScript实现`iframe`自适应高度的解决方案，确保在各种主流浏览器中都能正常工作。 首先，理解`iframe`的基本结构和属性是至关重要的。`iframe`标签通常包含`src`属性，用于指定要加载的...

    iframe自适应高度 .txt

    ### iframe自适应高度知识点详解 #### 一、概述 在网页设计与开发中，`&lt;iframe&gt;`（Inline Frame）是一种常用的HTML元素，用于在当前页面内嵌入另一个HTML文档。随着响应式设计的需求日益增加，如何使`&lt;iframe&gt;`内...

Magicbox
Global site tag (gtag.js) - Google Analytics