iframe自適應高度

參考文章 -  iframe

iframe優缺點

iframe黑魔法

首先要知道iframe的基本概念，iframe就是乙個可以引入其他網頁的框架，可以進行下面的設定：

"

" frameborder="
0" width="
500" height="
300" scrolling="
no">

這裡定義了iframe的src、寬、高，並且使得iframe不能scroll。

其次，window.top物件指向的是瀏覽器最頂層的視窗。 window.top物件指向的是當前視窗，可能是最頂層視窗，也可能是其中的乙個框架。我們可以使用window.top.location屬性來得到最頂層視窗的的url。

最後，要知道iframe的高度是不能自適應高度的，其高度和寬度沒有固定的規律， 所以我們這裡需要解決的問題就是 iframe 的高度動態適應的問題。

希望實現高度自適應，我們根據iframe的一些特性，分為下面的幾種情況：

個人理解： 同域是同網域名稱，而同源是同網域名稱、埠號、協議，兩個是不同的。

參考文章

這方法是用在父級頁面裡的，通過獲取子級頁面的高度給iframe設定高度

比如a.html中以iframe的形式嵌入了b.html，希望b.html可以是自適應的高度。 

b.html:

"en

">

a.html 如下所示：

"en

">這是a頁面
"./b.html
" frameborder="
1">

即通過ifr.contentwindow獲取到window， 而document是window的屬性，所以我們就可以通過window.document獲取到了，後面的也就簡單了。  

方法二：子級頁面給父級頁面元素設定高度

又因為這是沒有跨域存在的，所以iframe也可以通過 window.parent 來訪問父document。 比如c中有iframe的d，希望d可以自適應，那麼c的**如下：

"en

">這是c頁面
"./d.html
" frameborder="
1">

d.html 如下：

"en

">

即我們通過window.parent就可以訪問到父window，然後進而就可以訪問到document了，那麼document這個dom結構的任何東西我們就都可以訪問的到了。 

這些是同域的情況，那麼跨域的情況呢？ 

對於跨子域而言，實際上就非常簡單了，我們可以直接通過設定 document.domain ，進而就可以使用之前的沒有跨域的方式進行通訊了，這裡不做過多的贅述。

比如 'a.jd.com/3.html' 嵌入了 'b.jd.com/4.html'，這種跨子域的頁面。

這是乙個ifrmae，嵌入在3.html裡

根據自身內容調整高度aa

aaaa

aa

注意： 不難發現，和同域相比，這裡只要在兩個html中新增相同的 document.domain 就可以了。其他沒有區別。

首先大概說一下思路，比如我們需要在localhost: 8081/a.html這個html檔案中新增localhost:8088/b.html這個html檔案，希望讓跨域的b.html檔案高度自適應，由於跨域，所以我們沒有辦法直接獲取到localhost: 8088這個域下的檔案， 但是我們可以在b.html中引入乙個 localhost: 8081/c.html，通過c.html，我們就可以利用parent.parent訪問到a了，這樣，就可以來設定a中b的高度了。但是在c.html中怎麼才能拿到b.html的高度呢？ 顯然這又是跨域的，不能拿到，但是，我們可以通過在iframe引入c的時候，在後面新增乙個查詢字串，這樣，c就可以通過location來拿到高度，通過parent.parent進行設定了，這並不會對頁面產生什麼影響。

分別有以下資源：

這四個資源的關係如下所示：

我們通過乙個間接的方式，即通過乙個隱藏的b.html來實現高度自適應。

a.html的**如下（其中嵌入了c，注意： ac不同域）：

"ifr
" src="
" frameborder="
0" width="
100%
">

b.html**如下（b是嵌在c的頁面中的，注意：ba同域）：

注意： b是隱藏的，由於他和a同域，所以可以通過parent.parent訪問到a，再改變a中iframe的高度，這是最關鍵的，因為ab同域，所以b可以訪問到a的文件物件。

c.html （c嵌入在a中，和a不同域，要實現c的自適應，c多高那麼a的iframe就有多高，c中嵌入了b.html和d.js） 

aa

aaaa
aaaa
aaaa
aa"myifr
"style="

display:none
"src="
">

d.js （在頁面c載入後計算其高度，然後將計算出的height賦值給c裡引入的iframe（b.html）的src） 

//

計算頁面的實際高度，iframe自適應會用到
function calcpageheight(doc) 
window.onload =function() 
};

這裡的d.js為什麼要單獨拿出來和ab同源呢？ 不能直接把其中的**放進去嗎？ 

iframe自適應高度

iframe使用場景

iframe優缺點

這是乙個ifrmae，嵌入在3.html裡

根據自身內容調整高度

aaa

a

iframe 自適應高度

由於html沒有include或require，做網頁時我們會用iframe來達到包含頁面的目的。如果呼叫的iframe頁面高度會根據內容多少而發生變化，這時通常要保持iframe與內容頁面的高度，以避免出現iframe的滾動條。先搜尋了一下，有不少好的例子，但總覺得說的還不夠明了。下面給出詳細例子...

iframe自適應高度

來自 http ued.koubei.com 2008 05 07 iframe auto fit height 這貼比較長，沒有耐性的朋友請直接拖到帖子末尾的 示例，或者直接去玩我提供的demo。demo頁面 主頁面 iframe a.html 被包含頁面 iframe b.htm 和 ifram...

iframe高度自適應

nl ad this.height document.frames src document.body.scrollheight 例子 1，建立頁面 test.html 頁面中含有乙個 iframe，name為 ifrname id為 ifrid，src 為 iframe.html頁面。2，建立 i...