這個(gè)解決方案使用了Jquery,所以需要在iframe的src頁(yè)面里面引入
父頁(yè)面里面 簡(jiǎn)單點(diǎn) <iframe id="if1" scrolling="no" src="2.html"></iframe>
在iframe的src頁(yè)面里面
[html]
<script type="text/javascript">
function resizeContent()
{
$(window.parent.document).find("#if1").height($("#content").height());
}
function show400()
{
if($("#test400").css("display") == "none")
{
$("#test400").css("display","");
resizeContent();
}
else
{
$("#test400").css("display","none");
resizeContent();
}
}
$(document).ready(function(){
resizeContent();
})
</script>
<div id="left111">
<div class="mnav" onclick="test400()"></div>
<div class="mnav"><a href="ProductList.html">超級鏈接</a></div>
<div class="mnav"><a href="ProductCategory.html">超級鏈接</a></div>
<div class="mnav"><a href="ProductCategory.html">超級鏈接</a></div>
<div id="test400" style="display:none;height:400px;"></div>
<div class="mnav"><a href="Orders.html">超級鏈接</a></div>
<div class="mnav Mcurrent"><a href="Keywords.html">超級鏈接</a></div>
<div class="mnav"><a href="#">超級鏈接</a></div>
<div class="mnav"><a href="#">超級鏈接</a></div>
<div class="mnav"><a href="#">超級鏈接</a></div>
<div class="mnav"><a href="#">超級鏈接</a></div>
<div class="mnav"><a href="#">超級鏈接</a></div>
<div class="mnav"><a href="#">超級鏈接</a></div>
<br />
</div>
[html]
注釋 :這里面的 $(window.parent.document).find("#if1").height($("#content").height()); 這句話(huà)最初是
$(window.parent.document).find("#if1").height($(document).height());
可以實(shí)現自適應高度,但是不能實(shí)現縮放自適應。因為document的高度是展示內容出現過(guò)的最高高度,所以這里如果點(diǎn)擊展開(kāi),iframe不會(huì )縮小,只會(huì )展示最高出現過(guò)的高度。
所以這里要用一個(gè)父層容器,也就是最新的代碼。這樣就可以實(shí)現自適應了。