最簡(jiǎn)單的方法去掉iframe滾動(dòng)條
該文也可以說是一個(gè)iframe自適應(yīng)大小的折中解決辦法。iframe出現(xiàn)滾動(dòng)條的原因是,body里面的內(nèi)容的高度大于了iframe的高度,所以會(huì)出現(xiàn)滾動(dòng)條。
解決辦法:
采用Jquery從iframe嵌套的頁面中獲取一個(gè)高度值,在iframe的父窗口中的onload事件中更新iframe的高度。
具體實(shí)現(xiàn)代碼:
父頁面:
<script type="text/javascript">
function SetCwinHeight(){
var H=$("#myiframe").contents().find("meta").attr("content");
alert(H);
$("#myiframe2").height(H);
}
</script>
<body style="overflow:auto;">
<iframe id="myiframe" src="xx.html" onLoad="SetCwinHeight()"></iframe>
</body>
<script type="text/javascript">
function SetCwinHeight(){
var H=$("#myiframe").contents().find("meta").attr("content");
alert(H);
$("#myiframe2").height(H);
}
</script>
<body style="overflow:auto;"><iframe id="myiframe" src="xx.html" ></iframe></body></html>
子頁面:
Html代碼
<meta content="800px">
運(yùn)行原理: 父頁面讀取子頁面中meta的字段值來設(shè)置iframe的高度
額外說明:
當(dāng)iframe 的高度小于內(nèi)容高度時(shí),如果父窗口的BODY 的overflow:auto,則會(huì)出現(xiàn)2個(gè)垂直滾動(dòng)條,iframe的垂直滾動(dòng)條和父窗口的滾動(dòng)條;
如果這時(shí),BODY 的overflow:hidden,則只會(huì)出現(xiàn)iframe的垂直滾動(dòng)條,但是,iframe的內(nèi)容顯示不完。
關(guān)鍵詞:iframe
閱讀本文后您有什么感想? 已有 人給出評(píng)價(jià)!
- 11
- 27
- 437
- 25
- 39
- 52