技術提供:Blogger.

創意網頁設計,響應式網頁,部落格版型,資料庫,購物車,Bootstrap,RWD,html,css,php,jquery,MySQL,專營綠茶,紅茶,高山凍頂烏龍,阿里山杉林溪梨山大禹嶺茶及茶葉罐杯壺禮盒批發零售,兼營艋舺快遞,汽機車外送,中央果菜市場,環南市場,迪化街等地代購採買及各項代理服務! 孟甲服務專線:0952-916626
E-mail:roberchen3@gmail.com


讓iframe自動調整高度 響應式

讓iframe自動調整高度

<style type="text/css">
#video-wrapper{
    position: relative;
    padding-bottom: 56.25%;  //16:9
    overflow: hidden;
}
#video-wrapper iframe{
    position: absolute;
    top: 10px;
    left: 5%;
    bottom:5px;
    width: 90%;
    height: 90%;

}</style>
<div id="video-wrapper" style="text-align:center;">
<iframe frameborder="0" scrolling="no" src="#" style="border:none;overflow:hidden;"></iframe></div>
-------------------------------------------------------------------------------------------------------------------------------------------------

找了好幾個方法,就以這個方法簡單又有效~~

首先,加入iframe的語法。
<iframe src="./source"(欲連結的網頁) name="mainframe" width="98%" 
marginwidth="0" marginheight="0" scrolling="No" 
frameborder="0" id="mainframe" margin-left="20" ></iframe>

在到欲連結的網頁裡,在head下面加入以下程式碼。
<head>  
   <script>
      function resize(){
       parent.document.getElementById("mainframe").height=document.body.scrollHeight;    
     }
   </script>
</head>

並在body裡加入:
<body onload="resize();" > 

這樣就可以嚕~~

還有另一個方法也不錯。只要在同一個檔案內編寫就好。在有iframe的頁面的head之下加入以下程式碼。
<script type="text/javascript">
function SetCwinHeight(){
var iframeid=document.getElementById("iframeid"); //iframe id
if (document.getElementById){
   if (iframeid && !window.opera){
   if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
   iframeid.height = iframeid.contentDocument.body.offsetHeight;
   }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
   iframeid.height = iframeid.Document.body.scrollHeight;
   }
   }
}
}
</script>

iframe內加入onload="Javascript:SetCwinHeight()"
<iframe src="./NEWS" name="mainframe" width="98%" 
height="300" marginwidth="0" marginheight="0" 
onload="Javascript:SetCwinHeight()" 
 scrolling="No" frameborder="0" 
id="mainframe" margin-left="20" ></iframe>

因為我的iframe是包在contentRight裏,若contentRight的高度設為自動,則contentRight一開始的高度會很小,所以將contentRight 設一個 min-height:700px 就可以嚕。
~歡迎轉載,但請註明來源網站名稱和網址,文章若有侵權,請來信告知,我們會盡快處理~

響應式網頁架站只要6,888元起|[RWD]響應式網站,自適應網頁,讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物?"

Related Posts Plugin for WordPress, Blogger...

0 意見 :

張貼留言

1.猛甲茶道,歡迎多留言,可以幫自己網站打廣告~
2.需要 猛甲茶道 回覆,請勿使用匿名留言[可使用名稱/網址,名稱填自己名字,若無網址,請填E-mail]。
3.匿名攻訐、不相干之廣告適用於無條件刪去法,望請海涵:)
4.您可以使用一些 HTML 標記,如:
 <b>粗體</b>, <i>斜體</i>, <a href='網址'>描述文字</a>


室內設計 101時尚舍 happy玩家 中華民國兩岸消費者權益保護協會 孟甲部落格 孟氏洋行 AMCT 骨節 雅弈 統愛眼鏡大批發