綠色資源網:您身邊最放心的安全下載站! 最新軟件|熱門排行|軟件分類|軟件專題|論壇轉帖|廠商大全

技術教程
您的位置:首頁網頁設計網頁特效 → 最簡單的方法去掉iframe滾動條

最簡單的方法去掉iframe滾動條

我要評論2012/6/25 11:20:21來源:綠色資源網編輯:downcc.com [ ] 評論:0 點擊:0次

  該文也可以說是一個iframe自適應大小的折中解決辦法。iframe出現滾動條的原因是,body里面的內容的高度大于了iframe的高度,所以會出現滾動條。

  解決辦法:

  采用Jquery從iframe嵌套的頁面中獲取一個高度值,在iframe的父窗口中的onload事件中更新iframe的高度。

  具體實現代碼:

  父頁面:

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

  運行原理: 父頁面讀取子頁面中meta的字段值來設置iframe的高度

  額外說明:

  當iframe 的高度小于內容高度時,如果父窗口的BODY 的overflow:auto,則會出現2個垂直滾動條,iframe的垂直滾動條和父窗口的滾動條;

  如果這時,BODY 的overflow:hidden,則只會出現iframe的垂直滾動條,但是,iframe的內容顯示不完。

關鍵詞:iframe

閱讀本文后您有什么感想? 已有 人給出評價!

  • 0 歡迎喜歡
  • 0 白癡
  • 0 拜托
  • 0 哇
  • 0 加油
  • 0 鄙視
老钱庄三肖中特期期准