几行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;
100%;
position: absolute;
top: 0;
left: 0;
margin-top: 43px;" src="" scrolling="auto" frameborder="0" onload="resizeframe()">
</iframe>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

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>

<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>

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);
}

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

后来有人给出了一个另外的解决方案，跟这个原理类似，也贴出来以供参考。

Js代码

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

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();

});