场景: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高度,而不显示其滚动条 js #### 背景介绍 在网页开发过程中,经常会遇到需要在一个页面内嵌入另一个页面的情况,这时通常会使用HTML中的`iframe`元素来实现。然而,当嵌入的内容高度不确定或者...
在一些特殊情况下,我们需要让Iframe高度自动适应其中内容的大小。上面提供的文档内容,尽管通过OCR扫描技术出现了一些识别错误,但是核心的代码和思路是清晰的,能够帮助我们理解如何实现Iframe高度的自适应。 从...
这个案例中,可能还会涉及CSS样式调整,以适应不同的布局需求,以及可能的动画效果,比如使用CSS3的`transition`或`animation`属性。 总的来说,这个压缩包文件提供了一个关于JavaScript操作iframe滚动效果的实例,...