场景：Iframe嵌入flash,希望flash能随着页面的resize而resize。
主要代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="/lrm-suite/js/jquery-2.0.3.js"></script>
<script type="text/javascript">
var rpUrl = 'http://172.20.31.18:8080/lrm-suite/rp.xhtml';
function setAppFrameUrl(selectedUrl) {
if ($.isReady) {
activeUrl = selectedUrl;
$('#appFrame' ).setAttribute('src', selectedUrl);
} else {
setTimeout(function() {
setAppFrameUrl(selectedUrl);
}, 100);
}
}
function setNewActive(imgComp,urlName,imageSrc){
setAppFrameUrl(urlName);
imgComp.src = imageSrc;
}
$(document).ready(function(){
$(window).resize(resizeframe);
});
function resizeframe()
{
var margin-top = $('#appFrame' ).css( "margin-top" );
var topNum = margin-top.toString().slice(0,margin-top.length-2);
var actualHeight = document.body.offsetHeight - topNum;
$('#appFrame').css('height', actualHeight);
}
</script>
</head>
<body>
<div class="topMenuBar" id="topMenuBarDiv" style="z-index: 999999">
<a id="j_idt8">
<img src="/lrm-suite/images/Logo.png" alt="" style="float: left; border: 0; cursor: pointer;"
onclick="setNewActive(this,rpUrl,'/lrm-suite/images/Logo.png');"/>
</a>
.
.
.
.
</div>
<iframe id="appFrame" style="border: 0;
width: 100%;
position: absolute;
top: 0;
left: 0;
margin-top: 43px;" src="" scrolling="auto" frameborder="0" onload="resizeframe()">
</iframe>
</body>
</html>
分析：
首先导入JQuery框架，并设置iframe的scrolling=“auto”,这样的话可以自动的出现滚动条。
然后添加window的resize事件
$(document).ready(function(){
$(window).resize(resizeframe);
});
function resizeframe()
{
var margin-top = $('#appFrame' ).css( "margin-top" );
var topNum = margin-top.toString().slice(0,margin-top.length-2);
var actualHeight = document.body.offsetHeight - topNum;
$('#appFrame').css('height', actualHeight);
}
这样的话，每次浏览器resize的话，都会对iframe重新设置height，从而得到iframe resize的效果。
后来有人给出了一个另外的解决方案，跟这个原理类似，也贴出来以供参考。
var suiteVisible = true;
function resizeIframe() {
var el = document.getElementById("appFrame");
if (suiteVisible) {
el.style.height = (document.body.clientHeight - 43) + "px";
}
else {
el.style.height = (document.body.clientHeight) + "px";
}
}
$(window).resize(function() {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
resizeIframe();
});
相关推荐
### iFrame自动调整高度知识点详解 #### 一、前言 在网页开发中，经常会遇到需要将一个网页嵌入到另一个网页中的场景，这时候就会用到`<iframe>`标签。然而，由于`<iframe>`的高度默认是固定的，在内容发生变化时...
在探讨“嵌入到HTML的iframe自动适应大小”的主题时，我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度，从而实现良好的响应式设计和用户体验。...
2. **iframe自动适应高度** 当`iframe`加载的页面高度不确定时，我们需要动态调整`iframe`的高度以适应内容。由于跨域限制，我们不能直接获取子页面的DOM信息，但可以通过以下策略实现： - **使用代理页面** ...
标题提到的“iframe自动适应高度（完美自适应高度嵌套代码）”提供了一个解决方案，它能够确保`iframe`在各种主流浏览器中都能正确地自适应内容高度，包括360浏览器、IE6-9、遨游、火狐以及搜狗浏览器。 在传统的`...
当`iframe`中的内容高度不确定时，我们希望`iframe`能自动调整其高度以完全显示内部内容，避免出现滚动条或者内容被截断的情况。以下是一些实现`iframe`高度自适应的方法： 1. **JavaScript解决方案**： - **...
在窗口大小调整时，我们也需要调用handleFrameLoad函数来重新设置IFRAME框架的高度，以确保IFRAME框架的高度能够自动调整以适应窗口的大小变化。 在IFRAME框架中，我们可以使用table元素来控制IFRAME框架的高度。在...
因此，让`iframe`能够自动调整高度变得尤为重要。 #### 三、解决方案 接下来，我们将介绍一种简单有效的方法来实现`iframe`自动改变高度。该方法适用于现代浏览器，包括Chrome、Firefox、Safari等。 **核心代码...
兼容IE 6+ 、火狐、谷歌、等浏览器的Javascript 自动适应高的的IFrame
在默认情况下，`iframe`的高度是固定的，这意味着当嵌入的内容高度发生变化时，`iframe`不会自动调整其高度。这可能会导致内容溢出或出现滚动条的情况，从而影响用户体验。因此，实现`iframe`的高度自适应变得尤为...
当我们需要在页面中使用`iframe`并希望它能自动调整大小以适应其内容时，就需要使用到一些特定的技术。本示例主要讲解如何在Firefox和IE浏览器中实现`iframe`的自动加载和自动调整高宽。 首先，我们来看`AutoResize...
JavaScript实现iframe自动高度调整和不同主域名跨域是一项常见的需求，特别是在网页中嵌入第三方内容时。由于浏览器的安全策略——同源策略，不同主域名的页面之间无法直接进行JavaScript通信，这给iframe的使用带来...
然而，这些静态属性无法自动调整以适应内容的变化。 接下来，我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤： 1. **获取`iframe`元素**：通过`document....
总的来说，`iframe`多层级自动适应高度是一个常见的前端问题，通过JavaScript的`postMessage`和事件监听，我们可以实现动态的高度调整，确保用户能完整地查看所有内容。同时，为了提高用户体验，还应考虑优化加载...
当`iframe`内容加载完成后，可以使用JavaScript获取其内容区域的高度，然后设置`iframe`的高度。例如： ```javascript document.getElementById('myIframe').onload = function() { this.style.height = this....
然而，`<iframe>`的高度自适应问题常常困扰着开发者，尤其是当`<iframe>`内部的内容动态加载或者变化时，如何让`<iframe>`自动调整其高度以适应内容，而不会导致滚动条溢出或内容被截断，成为了一个常见需求。...
为了解决这个问题，我们可以利用JavaScript来动态调整iframe的高度，确保它始终适应其内部内容的大小。 在描述中提到的方法是通过编写一段JavaScript代码，使得iframe能够根据其内部页面内容的高度自动调整。这段...
在一些特殊情况下，我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容，尽管通过OCR扫描技术出现了一些识别错误，但是核心的代码和思路是清晰的，能够帮助我们理解如何实现Iframe高度的自适应。 从...
### 自动调节iframe高度，而不显示其滚动条 js #### 背景介绍 在网页开发过程中，经常会遇到需要在一个页面内嵌入另一个页面的情况，这时通常会使用HTML中的`iframe`元素来实现。然而，当嵌入的内容高度不确定或者...
这个案例中，可能还会涉及CSS样式调整，以适应不同的布局需求，以及可能的动画效果，比如使用CSS3的`transition`或`animation`属性。 总的来说，这个压缩包文件提供了一个关于JavaScript操作iframe滚动效果的实例，...