`

JS 获取iframe高度的静动态方法

阅读更多
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS 获取iframe高度的静动态方法</title>
<link rel="stylesheet" href="base.css" />
</head>
<body>
<h3>iframe 演示</h3>
<!--默认的-->
<iframe src="demo.html"></iframe>

<!-- 静态获取高度 -->
<iframe src="demo.html" scrolling="no" frameborder="0" id="iframeHei" width="100%"></iframe>
<script type="text/javascript">
function iframeAutoFit(iframeObj){ 
    setTimeout(function(){if(!iframeObj) return;iframeObj.height=(iframeObj.Document?iframeObj.Document.body.scrollHeight:iframeObj.contentDocument.body.offsetHeight);},200) 
}
window.onload = function () {
    iframeAutoFit(document.getElementById('iframeHei'));
};
</script>

<!-- 动态获取高度,每200毫秒获取一次 -->
<iframe src="demo.html" frameborder="0" scrolling="no" id="iframeHei2"  width="100%" onload="this.height=100"></iframe>
<script type="text/javascript">  
function reinitIframe(){  
	var iframe = document.getElementById("iframeHei2");  
	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){}  
}  
window.setInterval("reinitIframe()", 200);  
</script>
</body>
</html>

 

效果图:


 

 

 

 

 

 

 

 

 

 

 

 

 

  • 大小: 27.9 KB
1
0
分享到:
评论

相关推荐

    javascript动态调整iframe高度

    总之,`javascript`动态调整`iframe`高度的核心在于获取`iframe`内容的实际高度,并将其设置为`iframe`元素的`height`属性。通过正确处理同源策略和跨域通信,我们可以确保无论`iframe`内容如何变化,都能保持页面...

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

    js 控制 Iframe 高度自适应是指使用 JavaScript 语言来控制 iframe 的高度,使其能够自动调整以适应内容的高度。 在 iframe 高度自适应中,需要考虑多种浏览器的兼容性问题,包括 Firefox、IE、Opera 等不同的...

    js实现iframe自适应高度

    1. **获取`iframe`元素**:通过`document.getElementById`或`querySelector`方法找到页面上的`iframe`元素。 ```javascript var iframe = document.getElementById('iframeId') || document.querySelector('...

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

    总的来说,通过使用JavaScript动态计算`&lt;iframe&gt;`内容的高度并设置`&lt;iframe&gt;`的高度,可以有效地解决`&lt;iframe&gt;`内容高度自适应以及设置高度后无法缩小的问题。同时,要注意兼容性问题和跨域限制,以确保在各种环境下...

    用javascript动态调整iframe高度的方法

    为了解决这个问题,我们可以利用JavaScript来动态调整iframe的高度,确保它始终适应其内部内容的大小。 在描述中提到的方法是通过编写一段JavaScript代码,使得iframe能够根据其内部页面内容的高度自动调整。这段...

    自动调节iframe高度,而不显示其滚动条 js

    ### 自动调节iframe高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...

    跨域控制iframe高度

    这在需要动态调整iframe高度以适应内容时会带来挑战。本文将深入探讨如何实现跨域控制iframe的高度,以优化用户体验。 首先,我们需要理解同源策略。同源策略是浏览器为了保障安全而实施的一项规定,它只允许...

    iframe高度自适应.pdf

    ### iframe高度自适应技术详解 在网页开发过程中,经常会遇到需要在一个页面中嵌入另一个页面的需求,这通常通过HTML的`iframe`元素实现。然而,一个常见的问题是当嵌入的内容高度变化时,如何使`iframe`的高度能够...

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

    为了解决这个问题,我们需要一种方法来动态地调整`iframe`的高度,使其与内容匹配。这种技术通常涉及到JavaScript,通过监听`iframe`的`load`事件,然后获取`iframe`内的文档高度,并设置到`iframe`的`height`属性上...

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

    2. **JavaScript**:使用JavaScript来动态获取`iframe`的内容高度和宽度。可以监听`load`事件,当`iframe`加载完成后,通过`contentWindow`和`contentDocument`属性获取内容的尺寸,然后调整`iframe`的大小。例如: ...

    Iframe 高度自适应浏览器高度

    这种技术常被用来实现...以上就是关于“Iframe高度自适应浏览器高度”的主要知识点,实践中可能需要结合具体场景和需求选择合适的方法。在实际应用中,还要考虑到兼容性问题,确保在不同浏览器和设备上都能正常工作。

    js调用iframe实现打印页面内容的方法

    通过上述介绍,我们可以了解到使用JS调用iframe实现页面内容打印的方法主要分为以下几个步骤:准备打印内容、创建并配置iframe、调用打印功能以及处理打印后的清理工作。这些技术手段为网页开发者提供了灵活的方式来...

    JS动态修改iframe高度和宽度的方法

    JS动态修改iframe高度和宽度的方法主要涉及到JavaScript语言中对HTML元素进行操作的基本技巧,特别是针对iframe元素的尺寸调整。iframe元素在网页中常用于嵌入另一个HTML页面,而在JavaScript中,我们可以通过操作它...

    JAVASCRIPT让IFRAME框架的高度自适应

    在这篇文章中,我们将介绍使用JavaScript来让IFRAME框架的高度自适应的方法。首先,我们需要定义一个函数来获取当前页面的高度。这个函数可以使用document.body.offsetHeight或document.body.scrollHeight来获取页面...

    iframe高度随子页高度变化

    标题"iframe高度随子页高度变化"和描述中提到的问题,正是关注于这个动态调整`iframe`高度的技术。 要实现`iframe`高度随子页高度变化,主要涉及以下几个关键点: 1. **设置iframe的初始高度**:首先,我们需要为`...

    iframe自适应高度(DOM动态操作)

    为了使`iframe`的高度能够自适应其内部内容的高度变化,我们需要动态地获取`iframe`内部文档的实际高度,并将这个值设置为`iframe`自身的高度。具体实现步骤如下: 1. **获取`iframe`元素**: - 使用`document....

    iframe 自适高度 JS控制代码实现

    ### iframe自适应高度JS控制代码实现 #### 概述 在网页开发中,经常会遇到需要让`iframe`元素根据其内部加载的内容自适应高度的需求。这样可以使得网页布局更加合理,用户体验更佳。本文将详细介绍如何通过...

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

    被加载页面可以切换一个绝对定位的层,来使页面高度动态变化。 iFrame 自适应高度是前端开发中需要注意的问题,需要深入探讨以解决 JS 操作 DOM 引起的高度变化问题,并且需要注意浏览器兼容性问题。

    ext使用--Panel和iframe联合使用时页面高度的解决方法

    通过以上方法,我们可以确保Panel根据IFrame内容的高度动态调整,避免滚动条的出现或内容被裁剪。在实际应用中,应根据项目需求和兼容性考虑选择最适合的解决方案。同时,确保对IFrame的安全性进行充分考虑,防止跨...

Global site tag (gtag.js) - Google Analytics