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的效果。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐
  • —软件人才免语言低担保 赴美带薪读研!—



你可能感兴趣的:(JavaScript,iframe,适应)