`
luhantu
  • 浏览: 204068 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JavaScript Iframe 自动适应

阅读更多

场景: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();
            });
 

 

0
0
分享到:
评论

相关推荐

    iFrame 自动调整高度

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

    嵌入到HTML的iframe自动适应大小

    在探讨“嵌入到HTML的iframe自动适应大小”的主题时,我们主要关注的是如何使一个内嵌在HTML页面中的iframe元素能够根据其内容或者父容器的尺寸动态调整自身的高度,从而实现良好的响应式设计和用户体验。...

    iframe 跨域 自动适应高度

    2. **iframe自动适应高度** 当`iframe`加载的页面高度不确定时,我们需要动态调整`iframe`的高度以适应内容。由于跨域限制,我们不能直接获取子页面的DOM信息,但可以通过以下策略实现: - **使用代理页面** ...

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

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

    iframe自动适应高度

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

    JAVASCRIPT让IFRAME框架的高度自适应

    在窗口大小调整时,我们也需要调用handleFrameLoad函数来重新设置IFRAME框架的高度,以确保IFRAME框架的高度能够自动调整以适应窗口的大小变化。 在IFRAME框架中,我们可以使用table元素来控制IFRAME框架的高度。在...

    自动改变iframe的高度

    因此,让`iframe`能够自动调整高度变得尤为重要。 #### 三、解决方案 接下来,我们将介绍一种简单有效的方法来实现`iframe`自动改变高度。该方法适用于现代浏览器,包括Chrome、Firefox、Safari等。 **核心代码...

    自动适应高的iframe

    兼容IE 6+ 、火狐、谷歌、等浏览器的Javascript 自动适应高的的IFrame

    iframe高度自适应.pdf

    在默认情况下,`iframe`的高度是固定的,这意味着当嵌入的内容高度发生变化时,`iframe`不会自动调整其高度。这可能会导致内容溢出或出现滚动条的情况,从而影响用户体验。因此,实现`iframe`的高度自适应变得尤为...

    javascript firefox 自动加载iframe 自动调整高宽示例

    当我们需要在页面中使用`iframe`并希望它能自动调整大小以适应其内容时,就需要使用到一些特定的技术。本示例主要讲解如何在Firefox和IE浏览器中实现`iframe`的自动加载和自动调整高宽。 首先,我们来看`AutoResize...

    JavaScript实现iframe自动高度调整和不同主域名跨域

    JavaScript实现iframe自动高度调整和不同主域名跨域是一项常见的需求,特别是在网页中嵌入第三方内容时。由于浏览器的安全策略——同源策略,不同主域名的页面之间无法直接进行JavaScript通信,这给iframe的使用带来...

    js实现iframe自适应高度

    然而,这些静态属性无法自动调整以适应内容的变化。 接下来,我们可以利用JavaScript的DOM操作和事件监听来实现自适应高度的功能。以下是一个基本的实现步骤: 1. **获取`iframe`元素**:通过`document....

    iframe多层级自动适应高度

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

    iframe自适应高度

    当`iframe`内容加载完成后,可以使用JavaScript获取其内容区域的高度,然后设置`iframe`的高度。例如: ```javascript document.getElementById('myIframe').onload = function() { this.style.height = this....

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

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

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

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

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

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

    Iframe框架自动适应高度示例详解.pdf

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

    javascript经典特效---滚动的iframe页面.rar

    这个案例中,可能还会涉及CSS样式调整,以适应不同的布局需求,以及可能的动画效果,比如使用CSS3的`transition`或`animation`属性。 总的来说,这个压缩包文件提供了一个关于JavaScript操作iframe滚动效果的实例,...

Global site tag (gtag.js) - Google Analytics