首頁 > web前端 > html教學 > 讓iframe自適應高度的講解

讓iframe自適應高度的講解

小云云
發布: 2017-11-17 09:50:33
原創
2143 人瀏覽過

為什麼需要使用iframe自適應高度呢?其實就是為了美觀,不然iframe和視窗長短大小不一,看起來總是不那麼舒服,特別是對於我們這些程式設計的來說,如鯢在喉的感覺。在頁面中透過iframe嵌入了另外一個頁面後,如何使得頁面的這塊區域隨著iframe的高度自動適應而不會出現蹩腳的上下左右滾動條呢?下面這個辦法就是使用javascript實作iframe高度自適應的,這個可是相容所有瀏覽器的,ie,firefox,chrome,opera,safari這些瀏覽器都能夠實作iframe高度自適應的,具體的js程式碼如下:

function dyniframesize(down){
var Sys={};
var ua=navigator.userAgent.toLowerCase();
var s;
(s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:
(s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]:
(s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]:
(s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]:
(s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0;
var pTar=null;
if (document.getElementById){
pTar=document.getElementById(down);
}else{
eval('pTar='+down+';');
}
pTar.style.display="block";
if (Sys.ie){
if(Sys.ie=='9.0'){
pTar.height=pTar.contentWindow.document.body.offsetHeight+15+"px";
pTar.width=pTar.contentWindow.document.body.scrollWidth+"px";
}else if(Sys.ie=='8.0'){
pTar.height=pTar.Document.body.offsetHeight+15+"px";
pTar.width=pTar.Document.body.scrollWidth+"px";
}else{
pTar.height=pTar.Document.body.scrollHeight+25+"px";
pTar.width=pTar.Document.body.scrollWidth+"px";
}
}
if (Sys.firefox){
pTar.height=pTar.contentDocument.body.offsetHeight+15+"px";
pTar.width=pTar.contentDocument.body.scrollWidth+"px";
}
if (Sys.chrome){
pTar.height=pTar.contentDocument.body.offsetHeight;
pTar.width=pTar.contentDocument.body.scrollWidth;
}
if (Sys.opera){
pTar.height=pTar.contentDocument.body.offsetHeight;
pTar.width=pTar.contentDocument.body.scrollWidth;
}
if (Sys.safari){        
if(pTar.contentDocument.body.offsetHeight <= &#39;186&#39;){
pTar.height=pTar.contentDocument.body.offsetHeight+10;
}else{
pTar.height=pTar.contentDocument.body.offsetHeight;
}
pTar.width=pTar.contentDocument.body.scrollWidth;
}
}
登入後複製

具體的使用方法如下(設定id=phpernote的iframe的高度自適應iframe裡面的內容高度):

<iframe marginwidth="0" framespacing="0" marginheight="0" frameborder="0" border="0" width="620px"
 style="border:0px;background:#FFF;max-height:245px;
" scrolling="no" src="http://www.phpernote.com/comm/page/218167" id="phpernote" onload="javascript:dyniframesize(&#39;phpernote&#39;);">
</iframe>
登入後複製

上篇文章我們介紹了如何使用iframe屬性,這篇文章也依然教大家iframe自適應高度的解決辦法,希望兩篇文章讓你對iframe標籤有更深入的了解。

相關推薦:

如何使用iframe屬性

#php中關於main與 iframe相互通訊類別詳解

#php表單檔案iframe異步上傳教學講解

分享iframe標籤注意問題

html iframe使用的實戰總結分享

以上是讓iframe自適應高度的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板