在网上找了很多的iframe自适应高度的脚本，找到了比较好的
jquery很强大，代码很简单：
$("#iframe_1").load(function() {
$(this).height($(this).contents().height());
})
Index.hmtl
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div style="height:200px"></div>
<iframe id="iframe_1" src="iframe-inside-content.html" width="100%" border="2" scrolling="no"></iframe>
<script type="text/javascript">
$("#iframe_1").load(function() {
$(this).height($(this).contents().height());
})
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div style="height:200px"></div>
<iframe id="iframe_1" src="iframe-inside-content.html" width="100%" border="2" scrolling="no"></iframe>
<script type="text/javascript">
$("#iframe_1").load(function() {
$(this).height($(this).contents().height());
})
</script>
</body>
</html>
iframe-inside-content.html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function hideDiv(){
$("#content").hide();
$(window.parent.document).find('#iframe_1').height($("#wrap").height());
}
function showDiv(){
$("#content").show();
$(window.parent.document).find('#iframe_1').height($("#wrap").height());
}
</script>
<style>
*{margin:0;paddding:0;}
body{background:transparent;background-color:#eee;height:100%;}
#content{height:1000px;background-color:#ddd;margin:50px;}
</style>
</head>
<body>
<div id="wrap">
<a href="#" οnclick="hideDiv();">隐藏DIV</a>
<a href="#" οnclick="showDiv();">显示DIV</a>
<div id="content">div content</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function hideDiv(){
$("#content").hide();
$(window.parent.document).find('#iframe_1').height($("#wrap").height());
}
function showDiv(){
$("#content").show();
$(window.parent.document).find('#iframe_1').height($("#wrap").height());
}
</script>
<style>
*{margin:0;paddding:0;}
body{background:transparent;background-color:#eee;height:100%;}
#content{height:1000px;background-color:#ddd;margin:50px;}
</style>
</head>
<body>
<div id="wrap">
<a href="#" οnclick="hideDiv();">隐藏DIV</a>
<a href="#" οnclick="showDiv();">显示DIV</a>
<div id="content">div content</div>
<div>div2222 content</div>
</div>
</div>
</body>
</html>
开始找到代码的时候直接下载到本地去测试，发现谷歌浏览器是不行的。 protocols and ports must match. 这种错误，于是查了下，发现貌似是跨域问题，把他们拿到服务器上 用地址去访问就可以了，也就是说谷歌浏览器对file:///C:/Users/xx.xx/Desktop/index.html 认为file:///C:/Users/xx.xx/Desktop/iframe-inside-content.html 不是同域的。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
