為什么需要使用iframe自適應高度呢?其實就是為了美觀,要不然iframe和窗口長短大小不一,看起來總是不那么舒服,特別是對于我們這些編程的來說,如鯁在喉的感覺。
首先設置樣式
body{margin:0; padding:0;}
如果不設置body的margin和padding為0的話,頁面上下左右會出現空白。
html代碼如下
<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" frameborder="0"></iframe>
下面就是今天小編寫的時候遇到的問題,考慮到有些朋友可能沒怎么用jquery就直接用js吧。
方法一
var ifm= document.getElementById("myiframe");
ifm.height=document.documentElement.clientHeight;
這個方法可以達到讓iframe自適應高度的效果,但是如果你將窗口放大或縮小效果就不出來了,也就是本文開頭講的。需要再次刷新,那就不屬于自適應了。
那么問題來了,需要解決當窗口改變大小的時候執行js事件,以讓iframe自適就高度。那么就需要將相關的代碼寫成函數,并且給iframe加上onLoad="changeFrameHeight()",也就是下面的方法二了。
方法二
<iframe src="http://www.fulibac.com" id="myiframe" scrolling="no" οnlοad="changeFrameHeight()" frameborder="0"></iframe>
js代碼也得跟著改
function changeFrameHeight(){
??? var ifm= document.getElementById("iframepage");?
??? ifm.height=document.documentElement.clientHeight;}
window.οnresize=function(){ ?
?? ? changeFrameHeight(); ?}?
window.onresize的作用就是當窗口大小改變的時候會觸發這個事件。
所以,使用方法二就可以完美的、真正的讓iframe自適應高度了,試試看吧,并且兼容多種瀏覽器。