1. 程式人生 > >獲取到 Iframe 框架的實際高度,去掉 Iframe 中的滾動條

獲取到 Iframe 框架的實際高度,去掉 Iframe 中的滾動條

-----------------------------------------------

PS:最近發現以下寫的方法在某些特定的環境中,因為載入順序,或者隱藏 等等的原因,不能達到預期的效果,所以,再次我強烈建議,以後儘量少的使用 iframe , 使用div即可 , 然後在使用 jquery 的 load(url) 方法,就非常好用, 不用考慮滾動條的問題!!!

----------------------------------------------

在介紹中,本文使用了 Jquery ,並且注意,父頁面和子頁面中都含有 DOCTYPE 

在父頁面中獲取  iframe 內容 的實際高度

var h = $("#test_frame").get(0).contentWindow.document.body.scrollHeight;

在父頁面中更改 Iframe 的高度,使 Iframe 沒有滾動條

$("#test_frame").attr("height",h+100);

例子:

父頁面:

<!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" />
<title>無標題文件</title>
</head>
<script src="jquery-1.2.6.js" type="text/javascript" ></script>
<script>
function test(){
//獲取到 iframe 的高度:
//alert("parent:"+$("#test_frame").get(0).contentWindow.document.body.scrollHeight);
//賦值高度
var h = $("#test_frame").get(0).contentWindow.document.body.scrollHeight;
$("#test_frame").attr("height",h+100)
}
</script>
<body style="text-align:center">
這是父頁面<br />
<iframe id="test_frame" src="test25.html" frameborder="1" scrolling="no" ></iframe>
    <input type="button" value="測試" onclick="test()" />
</body>
</html>

子頁面:test25.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" />
<title>無標題文件</title>
</head>
<body style="overflow:hidden">
this is a test
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    aaa
</body>
</html>
<script>
//在 頁面中獲取本頁面的實際高度
alert(window.document.body.clientHeight);
</script>